:root {
  --color-ink: #2d2a26;
  --color-ink-secondary: #6b6359;
  --color-ink-muted: #7a7268;
  --color-ink-subtle: #958c81;
  --color-border-strong: #ddd6ca;
  --color-border: #ebe5db;
  --color-tan: var(--color-border);
  --color-stone: #f0ece4;
  --color-field-fill: #f5f1ea;
  --color-cream: #f8f4ee;
  --color-web-bg: #fbf8f3;
  --color-surface: #ffffff;

  --color-sage-50: #f2f7f4;
  --color-sage-light: #e4ede7;
  --color-sage-200: #cce2d4;
  --color-sage-300: #9dbca7;
  --color-sage: #5c8a6b;
  --color-sage-600: #3b6b52;
  --color-sage-700: #2d5641;
  --color-sage-dark: #23442c;

  --color-danger: #b3403a;
  --color-danger-soft: #fbe8e4;
  --color-danger-border: #f3c7bf;
  --color-danger-strong: #8c3427;

  --color-warning: #98610e;
  --color-warning-soft: #fcf3d6;
  --color-warning-strong: #7a4d10;
  --color-honey: #f4d374;
  --color-honey-dark: #faeab5;

  --color-info: #47698f;
  --color-info-soft: #eaf0f5;
  --color-info-border: #c9d7e5;
  --color-info-strong: #2f4b6b;

  --color-violet: #6a5a9e;
  --color-violet-soft: #efecf5;

  --color-peach: #e8896f;
  --color-peach-dark: #d98f6c;
  --color-accent-soft: #f8dbd0;
  --color-coral: #b95a40;

  --color-ochre: #aa822b;
  --color-slate: #4e7398;
  --color-lavender: #8b7bc0;
  --color-rose: #9c405a;
  --color-teal: #3e8580;

  --color-success: var(--color-sage-600);
  --color-success-soft: var(--color-sage-light);
  --color-success-border: var(--color-sage-200);
  --color-success-strong: var(--color-sage-700);
  --color-warning-border: var(--color-honey);
  --color-peach-soft: var(--color-accent-soft);
  --color-peach-strong: var(--color-danger-strong);

  --color-series-1: var(--color-sage-600);
  --color-series-2: var(--color-coral);
  --color-series-3: var(--color-ochre);
  --color-series-4: var(--color-info);
  --color-series-5: var(--color-lavender);
  --color-backdrop: color-mix(in srgb, var(--color-ink) 40%, transparent);

  --gradient-bg: linear-gradient(160deg, #dceade 0%, var(--color-field-fill) 60%, var(--color-web-bg) 100%);
  --shadow-tint: color-mix(in srgb, var(--color-ink) 8%, transparent);
  --shadow-soft: 0 10px 30px var(--shadow-tint);
  --shadow-card: 0 1px 2px var(--shadow-tint), 0 28px 56px -28px var(--shadow-tint);

  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Newsreader", ui-serif, Georgia, "Times New Roman", serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: 2.375rem;
  --text-3xl: 3.25rem;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.5;
  --leading-relaxed: 1.6;

  --tracking-display: -0.02em;
  --tracking-eyebrow: 0.1em;
  --tracking-code: 0.5em;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-full: 999px;

  --border-width: 1px;
  --focus-width: 3px;
  --control-height: 48px;
  --avatar-size: 36px;
  --icon-tile: 64px;
  --form-width: 400px;
  --sidebar-width: 248px;
  --sidebar-rail: 76px;
  --content-width: 1080px;
  --touch-target: 44px;
  --duration-fast: 150ms;
  --duration-slow: 400ms;
  --app-icon: 40px;
  --avatar-lg: 48px;
  --dot-size: 8px;
  --meter-height: 8px;
  --bar-height: 6px;
  --ring-size: 132px;
  --ring-stroke: 12px;
  --chart-height: 140px;
  --chart-rule: 2px;
  --bar-max: 2.5rem;
  --donut-size: 9.5rem;
  --donut-stroke: 16px;
  --qr-size: 248px;
  --dialog-width: 26rem;
  --panel-min: 18rem;
  --avatar-sm: 30px;
  --switch-width: 52px;
  --switch-height: 30px;
  --switch-thumb: 24px;
  --switch-inset: 3px;
  --choice-icon: 34px;
  --opacity-muted: 0.55;
  --nav-count: 22px;
  --tile-min: 15rem;
  --input-width-sm: 9rem;
  --focus-offset: 2px;
  --shadow-thumb: 0 1px 2px var(--shadow-tint);

  --gutter: clamp(1rem, 4vw, 2rem);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --gutter-left: max(var(--gutter), var(--safe-left));
  --gutter-right: max(var(--gutter), var(--safe-right));

  --layout-auth-columns: minmax(0, 1fr);
  --layout-auth-hero: none;
  --layout-auth-card-brand: flex;
  --layout-auth-align: flex-start;
  --layout-auth-main-bg: transparent;
  --layout-sidebar: none;
  --layout-header-brand: inline-flex;
  --layout-header-position: sticky;
  --layout-header-justify: space-between;
  --layout-header-bg: var(--color-surface);
  --layout-header-border: var(--color-border);
  --layout-menu-nav: grid;
  --layout-menu-name: 0;
}

@media (min-width: 60rem) {
  :root {
    --layout-auth-columns: 115fr 100fr;
    --layout-auth-hero: flex;
    --layout-auth-card-brand: none;
    --layout-auth-align: center;
    --layout-auth-main-bg: var(--color-web-bg);
    --layout-sidebar: flex;
    --layout-header-brand: none;
    --layout-header-position: static;
    --layout-header-justify: flex-end;
    --layout-header-bg: transparent;
    --layout-header-border: transparent;
    --layout-menu-nav: none;
    --layout-menu-name: 10rem;
  }
}