/* Warm Navigator Design Tokens */
/* Generated by _build_css.py from tokens.json v1.5.0 (2026-05-07). */
/* Do not edit by hand. Run: python _build_css.py */

:root {
  --color-brand-deep-sea: oklch(22.5% 0.04 244);
  --color-brand-ocean: oklch(35.0% 0.04 230);
  --color-brand-teal: oklch(58.0% 0.10 187);
  --color-brand-gold: oklch(74.0% 0.12 87);
  --color-brand-cream: oklch(97.0% 0.005 80);
  --color-neutral-50: oklch(97.0% 0.005 80);
  --color-neutral-100: oklch(95.0% 0.008 75);
  --color-neutral-200: oklch(89.0% 0.012 75);
  --color-neutral-300: oklch(80.0% 0.014 75);
  --color-neutral-400: oklch(63.0% 0.014 75);
  --color-neutral-500: oklch(46.0% 0.013 70);
  --color-neutral-600: oklch(34.0% 0.012 65);
  --color-neutral-700: oklch(24.0% 0.011 65);
  --color-neutral-800: oklch(23.5% 0.035 244);
  --color-neutral-900: oklch(22.5% 0.04 244);
  --color-semantic-success: #0D9488;
  --color-semantic-warning: #D4A853;
  --color-semantic-danger: #B85C4A;
  --color-semantic-info: #4A8DA8;
  --color-text-primary: var(--color-brand-deep-sea);
  --color-text-secondary: var(--color-brand-ocean);
  --color-text-muted: rgba(24,39,58,0.7);
  --color-text-inverse: var(--color-brand-cream);
  --color-text-link: var(--color-brand-teal);
  --color-fg-default: #18273A;
  --color-fg-strong-muted: color-mix(in oklab, #18273A 70%, transparent);
  --color-fg-muted: color-mix(in oklab, #18273A 78%, transparent);
  --color-fg-soft: color-mix(in oklab, #18273A 82%, transparent);
  --color-fg-faint: color-mix(in oklab, #18273A 30%, transparent);
  --color-line-default: color-mix(in oklab, #18273A 12%, transparent);
  --color-line-strong: color-mix(in oklab, #18273A 22%, transparent);
  --color-surface-page: var(--color-brand-cream);
  --color-surface-card: oklch(98.0% 0.004 80);
  --color-surface-sunken: oklch(92.5% 0.008 75);
  --color-surface-dark: var(--color-brand-deep-sea);
  --color-surface-dark-alt: var(--color-brand-ocean);
  --color-surface-raised-dark: oklch(36.5% 0.038 230);
  --color-border-default: var(--color-neutral-200);
  --color-border-strong: var(--color-neutral-300);
  --color-border-focus: var(--color-brand-teal);
  --color-gradient-accent: linear-gradient(90deg, #0D9488, #D4A853, transparent);
  --color-gradient-fade-teal: linear-gradient(90deg, #0D9488, transparent);
  --spacing-0: 0px;
  --spacing-px: 1px;
  --spacing-0.5: 2px;
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-3: 12px;
  --spacing-4: 16px;
  --spacing-5: 20px;
  --spacing-6: 24px;
  --spacing-8: 32px;
  --spacing-10: 40px;
  --spacing-12: 48px;
  --spacing-16: 64px;
  --spacing-20: 80px;
  --spacing-24: 96px;
  --spacing-30: 120px;
  --spacing-40: 160px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-base: 8px;
  --radius-lg: 10px;
  --radius-xl: 14px;
  --radius-2xl: 20px;
  --radius-full: 9999px;
  --shadow-none: none;
  --shadow-sm: 0 1px 2px rgba(24,39,58,0.06);
  --shadow-base: 0 2px 6px rgba(24,39,58,0.08);
  --shadow-md: 0 4px 12px rgba(24,39,58,0.10);
  --shadow-lg: 0 8px 24px rgba(24,39,58,0.12);
  --shadow-xl: 0 16px 40px rgba(24,39,58,0.14);
  --shadow-inset-focus: inset 0 0 0 2px #0D9488;
  --motion-duration-instant: 0ms;
  --motion-duration-faster: 150ms;
  --motion-duration-fast: 200ms;
  --motion-duration-base: 250ms;
  --motion-duration-slow: 400ms;
  --motion-duration-slowest: 600ms;
  --motion-delay-none: 0ms;
  --motion-delay-short: 50ms;
  --motion-delay-base: 100ms;
  --motion-delay-long: 200ms;
  --motion-easing-linear: linear;
  --motion-easing-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-easing-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-easing-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --motion-reduced-motion-duration: 0ms;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1200px;
  --container-2xl: 1280px;
  --container-reading: 720px;
  --grid-columns: 12;
  --grid-gap-mobile: 24px;
  --grid-gap-desktop: 32px;
  --icon-size-xs: 12px;
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-base: 24px;
  --icon-size-lg: 32px;
  --icon-size-xl: 48px;
  --icon-size-2xl: 64px;
  --icon-stroke-width: 1.5;
  --focus-ring-outline: 2px solid #0D9488;
  --focus-ring-outline-offset: 2px;
  --border-width-0: 0;
  --border-width-1: 1px;
  --border-width-2: 2px;
  --border-width-4: 4px;
  --z-index-base: 0;
  --z-index-dropdown: 100;
  --z-index-sticky: 200;
  --z-index-overlay: 300;
  --z-index-modal: 400;
  --z-index-toast: 500;
  --z-index-tooltip: 600;
}

@supports not (color: oklch(0% 0 0)) {
  :root {
    --color-brand-deep-sea: #18273A;
    --color-brand-ocean: #2D4A5E;
    --color-brand-teal: #0D9488;
    --color-brand-gold: #D4A853;
    --color-brand-cream: #F8F6F2;
    --color-neutral-50: #F8F6F2;
    --color-neutral-100: #F4F1EB;
    --color-neutral-200: #E5E0D6;
    --color-neutral-300: #CCC5B5;
    --color-neutral-400: #9A917F;
    --color-neutral-500: #6B6356;
    --color-neutral-600: #4D453A;
    --color-neutral-700: #332E27;
    --color-neutral-800: #1E2A3B;
    --color-neutral-900: #18273A;
    --color-surface-card: #FBF9F5;
    --color-surface-sunken: #EFECE5;
    --color-surface-raised-dark: #324F62;
  }
}
