@layer tokens, base, layout, components, utilities;

@layer tokens {
  :root {
    --font: 'Onest', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

    --t-display:  700 2rem/1.1       var(--font);
    --t-title1:   700 1.5rem/1.2     var(--font);
    --t-title2:   650 1.1875rem/1.3  var(--font);
    --t-headline: 650 0.9375rem/1.4  var(--font);
    --t-body:     450 0.875rem/1.55  var(--font);
    --t-subhead:  500 0.8125rem/1.45 var(--font);
    --t-footnote: 500 0.75rem/1.4    var(--font);
    --t-caption:  600 0.6875rem/1.3  var(--font);

    --track-display: -0.022em;
    --track-title: -0.015em;
    --track-caption: 0.06em;

    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px; --s5: 20px;
    --s6: 24px; --s7: 32px; --s8: 40px; --s9: 48px; --s10: 64px;

    --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px;
    --r-full: 999px;

    --ease: cubic-bezier(0.32, 0.72, 0, 1);
    --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --fast: 0.12s; --base: 0.18s; --slow: 0.28s;

    --z-scrim: 50; --z-modal: 70; --z-toast: 80;

    --sidebar-w: 236px;
    --topbar-h: 60px;
    --content-max: 1180px;
    --gutter: var(--s7);
  }

  :root,
  :root[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0a0b0d;
    --surface: #101114;
    --surface-hover: #17181c;
    --surface-active: #1e1f24;
    --surface-sunken: #0c0d10;
    --overlay: #141519;

    --line: rgba(255, 255, 255, .07);
    --line-strong: rgba(255, 255, 255, .12);
    --line-faint: rgba(255, 255, 255, .045);

    --text: #f4f5f7;
    --text-secondary: #a2a7b4;
    --text-tertiary: #838996;
    --text-quaternary: #5c626e;

    --accent: #3b82f6;
    --accent-hover: #2563eb;
    --accent-text: #60a5fa;
    --accent-soft: rgba(59, 130, 246, .14);
    --accent-ring: rgba(59, 130, 246, .35);
    --on-accent: #ffffff;

    --green: #30d158; --green-text: #3fdd66; --green-soft: rgba(48, 209, 88, .14);
    --amber: #ff9f0a; --amber-text: #ffb340; --amber-soft: rgba(255, 159, 10, .14);
    --red:   #ff453a; --red-text:   #ff6961; --red-soft:   rgba(255, 69, 58, .14);

    --scrim: rgba(0, 0, 0, .6);
    --shadow-overlay: 0 24px 60px -20px rgba(0, 0, 0, .7);
    --shadow-popover: 0 12px 32px -12px rgba(0, 0, 0, .6);

    --scroll-thumb: rgba(255, 255, 255, .13);
    --scroll-thumb-hover: rgba(255, 255, 255, .26);

    --ov-02: rgba(255,255,255,.02); --ov-04: rgba(255,255,255,.04);
    --ov-06: rgba(255,255,255,.06); --ov-08: rgba(255,255,255,.08);
    --ov-12: rgba(255,255,255,.12); --ov-16: rgba(255,255,255,.16);
    --ov-24: rgba(255,255,255,.24); --ov-40: rgba(255,255,255,.40);
  }

  :root[data-theme="light"] {
    color-scheme: light;

    --bg: #f6f7f9;
    --surface: #ffffff;
    --surface-hover: #f4f5f7;
    --surface-active: #eceef1;
    --surface-sunken: #f0f1f4;
    --overlay: #ffffff;

    --line: rgba(9, 9, 11, .09);
    --line-strong: rgba(9, 9, 11, .16);
    --line-faint: rgba(9, 9, 11, .05);

    --text: #16181d;
    --text-secondary: #4a5160;
    --text-tertiary: #6b7280;
    --text-quaternary: #99a0ad;

    --accent: #2563eb;
    --accent-hover: #1d4ed8;
    --accent-text: #1d4ed8;
    --accent-soft: rgba(37, 99, 235, .10);
    --accent-ring: rgba(37, 99, 235, .30);
    --on-accent: #ffffff;

    --green: #16a34a; --green-text: #15803d; --green-soft: rgba(22, 163, 74, .12);
    --amber: #d97706; --amber-text: #b45309; --amber-soft: rgba(217, 119, 6, .12);
    --red:   #dc2626; --red-text:   #b91c1c; --red-soft:   rgba(220, 38, 38, .12);

    --scrim: rgba(9, 9, 11, .40);
    --shadow-overlay: 0 24px 60px -20px rgba(9, 9, 11, .22);
    --shadow-popover: 0 12px 32px -12px rgba(9, 9, 11, .16);

    --scroll-thumb: rgba(9, 9, 11, .16);
    --scroll-thumb-hover: rgba(9, 9, 11, .30);

    --ov-02: rgba(9,9,11,.02); --ov-04: rgba(9,9,11,.04);
    --ov-06: rgba(9,9,11,.06); --ov-08: rgba(9,9,11,.08);
    --ov-12: rgba(9,9,11,.12); --ov-16: rgba(9,9,11,.16);
    --ov-24: rgba(9,9,11,.24); --ov-40: rgba(9,9,11,.40);
  }

  @media (prefers-reduced-motion: reduce) {
    :root {
      --fast: 0.01ms; --base: 0.01ms; --slow: 0.01ms;
    }
  }
}