/* ══ Illuminate — Human-First Design Tokens ══
   Warm, breathable, supportive — like a friend checking in
   Not clinical, not dense, not "dashboard-y"
   ════════════════════════════════════════════════════════════════════ */

@layer tokens, base, components, layout, motion, overrides;

/* ══ LAYER: tokens ══ */
@layer tokens {
  :root {
    --bg: #FAF6F0;
    --bg-elevated: #FFFFFF;
    --surface: #FFFFFF;
    --surface-hover: #F9F5EB;
    --surface-pressed: #F0EBE0;
    --surface-glass: rgba(255, 250, 240, 0.85);

    --border: #E8E0D4;
    --border-strong: #DCCCC8;
    --border-focus: #C47A2A;
    --border-error: #C45D4A;
    --border-success: #7BA85E;

    --accent: #C47A2A;
    --accent-hover: #B06B24;
    --accent-pressed: #9C5F20;
    --accent-light: #FDF3E7;
    --accent-glow: rgba(196, 122, 42, 0.18);
    --accent-glow-strong: rgba(196, 122, 42, 0.28);
    --accent-2: #7BA85E;
    --accent-2-hover: #6B9452;
    --accent-2-light: #EBF4EB;

    --success: #7BA85E;
    --success-light: #EBF4EB;
    --success-glow: rgba(123, 168, 94, 0.18);
    --error: #C45D4A;
    --error-light: #FBECEA;
    --error-glow: rgba(196, 93, 74, 0.18);
    --warning: #D4A83A;
    --warning-light: #FDF3E7;
    --info: #5C8EE6;
    --info-light: #EAF0FA;

    --text-primary: #2D2824;
    --text-secondary: #6B5F56;
    --text-muted: #9D9288;
    --text-inverse: #FAF6F0;
    --text-on-accent: #2D2824;

    --glass-bg: rgba(255, 250, 240, 0.8);
    --glass-border: #E8E0D4;
    --glass-blur: blur(20px);
    --glass-highlight: rgba(255, 255, 255, 0.5);

    --space-1: 4px; --space-2: 8px; --space-3: 12px;
    --space-4: 16px; --space-5: 20px; --space-6: 24px;
    --space-7: 28px; --space-8: 32px; --space-9: 36px;
    --space-10: 40px; --space-12: 48px; --space-14: 56px;
    --space-16: 64px; --space-20: 80px; --space-24: 96px;
    --space-32: 128px;

    --space-fluid-sm: clamp(12px, 2vw, 16px);
    --space-fluid-md: clamp(24px, 3vw, 32px);
    --space-fluid-lg: clamp(32px, 5vw, 56px);
    --space-fluid-xl: clamp(48px, 7vw, 96px);

    --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px;
    --radius-xl: 24px; --radius-2xl: 32px; --radius-3xl: 40px;
    --radius-full: 9999px;

    --shadow-xs: 0 1px 2px rgba(45, 40, 36, 0.04);
    --shadow-sm: 0 2px 8px rgba(45, 40, 36, 0.06);
    --shadow-md: 0 8px 24px rgba(45, 40, 36, 0.07);
    --shadow-lg: 0 16px 40px rgba(45, 40, 36, 0.09);
    --shadow-xl: 0 24px 60px rgba(45, 40, 36, 0.11);
    --shadow-glass: 0 8px 32px rgba(45, 40, 36, 0.07), inset 0 1px 0 rgba(255,255,255,0.5);
    --shadow-card: 0 2px 12px rgba(45, 40, 36, 0.05), 0 1px 0 rgba(255,255,255,0.6) inset;
    --shadow-card-hover: 0 12px 32px rgba(45, 40, 36, 0.1), 0 1px 0 rgba(255,255,255,0.6) inset;
    --shadow-floating: 0 20px 50px rgba(45, 40, 36, 0.12);
    --shadow-elevated: 0 4px 24px rgba(45, 40, 36, 0.08), 0 0 0 1px rgba(0,0,0,0.03);

    --font-sans: 'Inter Variable', 'Inter', system-ui, sans-serif;
    --font-display: 'DM Sans Variable', 'Inter Variable', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono Variable', 'Fira Code', monospace;

    --text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
    --text-sm: clamp(0.8125rem, 0.775rem + 0.2vw, 0.875rem);
    --text-base: clamp(0.9375rem, 0.9rem + 0.25vw, 1rem);
    --text-lg: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);
    --text-xl: clamp(1.25rem, 1.15rem + 0.4vw, 1.375rem);
    --text-2xl: clamp(1.5rem, 1.35rem + 0.75vw, 1.75rem);
    --text-3xl: clamp(2rem, 1.75rem + 1.25vw, 2.25rem);
    --text-4xl: clamp(2.5rem, 2.1rem + 1.8vw, 3rem);
    --text-5xl: clamp(3rem, 2.5rem + 2.2vw, 3.5rem);

    --leading-tight: 1.15; --leading-snug: 1.25; --leading-normal: 1.55;
    --leading-relaxed: 1.7; --leading-loose: 1.85;

    --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800;

    --container-max: 42rem; --container-wide: 56rem;
    --header-height: 64px; --nav-width: 260px; --nav-collapsed: 72px;
    --sidebar-width: 260px; --sidebar-collapsed: 72px;
    --drawer-width: 300px; --bottom-nav-height: 68px;

    --z-base: 0; --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300;
    --z-drawer-backdrop: 400; --z-drawer: 500; --z-modal-backdrop: 600;
    --z-modal: 700; --z-popover: 800; --z-toast: 900; --z-tooltip: 1000;

    --duration-instant: 80ms; --duration-fast: 140ms; --duration-normal: 220ms;
    --duration-slow: 350ms; --duration-slower: 500ms; --duration-slowest: 700ms;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --ease-gentle: cubic-bezier(0.25, 0.46, 0.45, 0.94);

    --transition-fast: 120ms ease-out; --transition-normal: 220ms ease-out;
    --transition-slow: 350ms ease-out; --transition-slower: 500ms ease-out;

    --cq-xs: 320px; --cq-sm: 480px; --cq-md: 640px;
    --cq-lg: 800px; --cq-xl: 1024px; --cq-2xl: 1280px; --cq-3xl: 1440px;

    --vt-page: page; --vt-sidebar: sidebar; --vt-content: content;
    --vt-nav: navigation; --vt-header: header; --vt-card: card;
    --motion-safe: 1; --motion-reduce: 0;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #1A1614; --bg-elevated: #23201D; --surface: #23201D;
      --surface-hover: #2D2824; --surface-pressed: #1C1A18;
      --surface-glass: rgba(29, 26, 24, 0.85);
      --text-primary: #F5F0EB; --text-secondary: #B8A8A0; --text-muted: #8A7F75;
      --text-inverse: #1A1614; --text-on-accent: #1A1614;
      --accent: #D49A3A; --accent-hover: #E0A840; --accent-pressed: #B8862A;
      --accent-light: rgba(212, 154, 58, 0.12); --accent-glow: rgba(212, 154, 58, 0.15);
      --accent-glow-strong: rgba(212, 154, 58, 0.25); --accent-2: #8BB87A;
      --accent-2-hover: #9BC88A; --success: #8BB87A; --success-light: rgba(139, 184, 122, 0.1);
      --error: #E07C6C; --error-light: rgba(224, 124, 108, 0.1); --warning: #E8B84A;
      --info: #7AA8E8; --border: #3D3630; --border-strong: #4A423A;
      --glass-bg: rgba(29, 26, 24, 0.85); --glass-border: #3D3630;
      --glass-blur: blur(20px); --glass-blur-strong: blur(40px);
      --glass-highlight: rgba(255,255,255,0.04); --glass-highlight-strong: rgba(255,255,255,0.08);
      --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
      --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 16px 40px rgba(0,0,0,0.45);
      --shadow-xl: 0 24px 60px rgba(0,0,0,0.5); --shadow-glass: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
      --shadow-card: 0 2px 16px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.03) inset;
      --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset;
      --shadow-focus: 0 0 0 3px rgba(212, 154, 58, 0.25);
    }
  }

  [data-theme="light"] {
    --bg: #FAF6F0; --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-hover: #F9F5EB;
    --surface-pressed: #F0EBE0; --surface-glass: rgba(255, 250, 240, 0.85);
    --text-primary: #2D2824; --text-secondary: #6B5F56; --text-muted: #9D9288;
    --text-inverse: #FAF6F0; --text-on-accent: #2D2824;
    --accent: #C47A2A; --accent-hover: #B06B24; --accent-pressed: #9C5F20;
    --accent-light: #FDF3E7; --accent-glow: rgba(196, 122, 42, 0.18); --accent-glow-strong: rgba(196, 122, 42, 0.28);
    --accent-2: #7BA85E; --accent-2-hover: #6B9452; --success: #7BA85E; --success-light: #EBF4EB;
    --success-glow: rgba(123, 168, 94, 0.18); --error: #C45D4A; --error-light: #FBECEA;
    --error-glow: rgba(196, 93, 74, 0.18); --warning: #D4A83A; --warning-light: #FDF3E7;
    --info: #5C8EE6; --info-light: #EAF0FA; --border: #E8E0D4; --border-strong: #DCCCC8;
    --glass-bg: rgba(255, 250, 240, 0.85); --glass-border: #E8E0D4;
    --glass-blur: blur(20px); --glass-blur-strong: blur(40px);
    --glass-highlight: rgba(255, 255, 255, 0.5); --glass-highlight-strong: rgba(255, 255, 255, 0.1);
    --shadow-xs: 0 1px 2px rgba(45, 40, 36, 0.04); --shadow-sm: 0 2px 8px rgba(45, 40, 36, 0.06);
    --shadow-md: 0 8px 24px rgba(45, 40, 36, 0.07); --shadow-lg: 0 16px 40px rgba(45, 40, 36, 0.09);
    --shadow-xl: 0 24px 60px rgba(45, 40, 36, 0.11);
    --shadow-glass: 0 8px 32px rgba(45, 40, 36, 0.07), inset 0 1px 0 rgba(255,255,255,0.5);
    --shadow-card: 0 2px 12px rgba(45, 40, 36, 0.05), 0 1px 0 rgba(255,255,255,0.6) inset;
    --shadow-card-hover: 0 12px 32px rgba(45, 40, 36, 0.1), 0 1px 0 rgba(255,255,255,0.6) inset;
    --shadow-focus: 0 0 0 3px #FDF3E7; --shadow-focus-error: 0 0 0 3px #FBECEA;
    --shadow-focus-success: 0 0 0 3px #EBF4EB; --shadow-inner: inset 0 2px 4px rgba(45, 40, 36, 0.04);
    --shadow-ring: 0 0 0 1px #E8E0D4;
    --sidebar-width: 260px; --sidebar-collapsed: 72px;
  }

  [data-theme="dark"] {
    --bg: #1A1614; --bg-elevated: #23201D; --surface: #23201D; --surface-hover: #2D2824;
    --surface-pressed: #1C1A18; --surface-glass: rgba(29, 26, 24, 0.85);
    --text-primary: #F5F0EB; --text-secondary: #B8A8A0; --text-muted: #8A7F75;
    --text-inverse: #1A1614; --text-on-accent: #1A1614; --accent: #D49A3A;
    --accent-hover: #E0A840; --accent-pressed: #B8862A; --accent-light: rgba(212, 154, 58, 0.12);
    --accent-glow: rgba(212, 154, 58, 0.15); --accent-glow-strong: rgba(212, 154, 58, 0.25);
    --accent-2: #8BB87A; --accent-2-hover: #9BC88A; --success: #8BB87A;
    --success-light: rgba(139, 184, 122, 0.1); --error: #E07C6C; --error-light: rgba(224, 124, 108, 0.1);
    --warning: #E8B84A; --warning-light: rgba(232, 184, 74, 0.1); --info: #7AA8E8;
    --info-light: rgba(122, 168, 232, 0.1); --border: #3D3630; --border-strong: #4A423A;
    --glass-bg: rgba(29, 26, 24, 0.85); --glass-border: #3D3630;
    --glass-blur: blur(20px); --glass-blur-strong: blur(40px);
    --glass-highlight: rgba(255,255,255,0.04); --glass-highlight-strong: rgba(255,255,255,0.08);
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3); --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.4); --shadow-lg: 0 16px 40px rgba(0,0,0,0.45);
    --shadow-xl: 0 24px 60px rgba(0,0,0,0.5); --shadow-glass: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03);
    --shadow-card: 0 2px 16px rgba(0,0,0,0.25), 0 1px 0 rgba(255,255,255,0.03) inset;
    --shadow-card-hover: 0 12px 40px rgba(0,0,0,0.35), 0 1px 0 rgba(255,255,255,0.04) inset.
    --shadow-focus: 0 0 0 3px rgba(212, 154, 58, 0.25); --shadow-focus-error: 0 0 0 3px rgba(224, 124, 108, 0.2);
    --shadow-focus-success: 0 0 0 3px rgba(139, 184, 122, 0.2);
    --sidebar-width: 260px; --sidebar-collapsed: 72px;
  }

  @media (prefers-contrast: more) { :root { --border: currentColor; --border-strong: currentColor; --accent-light: var(--accent); --accent-glow: var(--accent); } }
  @media (forced-colors: active) { :root { --border: currentColor; --border-strong: currentColor; --accent: CanvasText; } }
  @media (prefers-reduced-motion: reduce) { :root { --motion-safe: 0; --motion-reduce: 1; --duration-instant: 0.01ms; --duration-fast: 0.01ms; --duration-normal: 0.01ms; --duration-slow: 0.01ms; --duration-slower: 0.01ms; } }
}
</layer>