/* ============================================================
   Design Tokens — inherited from company/visuals/system/tokens/
   Mirrors design-tokens.md exactly. Source of truth for colors,
   spacing, type, motion, radii across every public surface.
   ============================================================ */

:root {
  /* Background + surface (dark register — default) */
  --co-abyss: #0E1326;
  --co-midnight: #151B33;
  --co-midnight-soft: #181E36;
  --co-slate: #1E2540;
  --co-edge: #2A3458;

  /* Text (dark register) */
  --co-snow: #F5F7FB;
  --co-mist: #A6AECC;

  /* Company accent */
  --co-teal: #0D9488;
  --co-teal-light: #16C2B0;
  --co-teal-dark: #0A7A6F;

  /* Functional */
  --co-verdant: #22C55E;
  --co-sun: #EAB308;
  --co-rose: #F43F5E;

  /* Background-active (semantically same as primary surfaces) */
  --bg: var(--co-abyss);
  --surface: var(--co-midnight);
  --surface-soft: var(--co-midnight-soft);
  --surface-raised: var(--co-slate);
  --border: var(--co-edge);
  --text-primary: var(--co-snow);
  --text-secondary: var(--co-mist);
  --accent: var(--co-teal);

  /* Spacing scale (8px baseline) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 28px;
  --s8: 32px;
  --s10: 40px;
  --s12: 48px;
  --s16: 64px;
  --s20: 80px;
  --s24: 96px;
  --s32: 128px;

  /* Radii */
  --radius-0: 0px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Typography */
  --font-display: 'Inter Display', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

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

  /* Type tiers — hero page scale */
  --type-h1: 72px;
  --type-h2: 40px;
  --type-h3: 28px;
  --type-h4: 20px;
  --type-lead: 22px;
  --type-body: 17px;
  --type-body-small: 14px;
  --type-caption: 12px;
  --type-mono-body: 14px;
  --type-mono-small: 12px;
  --type-mono-chip: 13px;

  /* Line heights */
  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.55;
  --lh-loose: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.5px;
  --tracking-normal: 0;
  --tracking-wide: 0.5px;
  --tracking-wider: 1px;

  /* Motion */
  --motion-fast: 200ms;
  --motion-standard: 250ms;
  --motion-normal: 400ms;
  --motion-medium: 600ms;
  --motion-slow: 800ms;
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Opacity scale */
  --op-80: 0.8;
  --op-60: 0.6;
  --op-30: 0.3;
  --op-16: 0.16;
  --op-6: 0.06;
  --op-4: 0.04;

  /* Layout */
  --content-max: 1440px;
  --gutter-lg: 80px;
  --gutter-md: 48px;
  --gutter-sm: 24px;

  /* Z-index */
  --z-floor: 0;
  --z-ground: 10;
  --z-raised: 20;
  --z-overlay: 30;
  --z-modal: 100;
}

/* Light register — applied when user prefers light OR explicitly toggled */
@media (prefers-color-scheme: light) {
  :root:not([data-register="dark"]) {
    --co-abyss: #F7F8FA;
    --co-midnight: #FFFFFF;
    --co-midnight-soft: #F3F5F8;
    --co-slate: #F1F4F8;
    --co-edge: #DDE3EA;
    --co-snow: #10151F;
    --co-mist: #5B6679;
    --co-teal: #176B5D;
    --co-verdant: #16A34A;
    --co-sun: #CA8A04;
    --co-rose: #E11D48;

    --bg: var(--co-abyss);
    --surface: var(--co-midnight);
    --surface-soft: var(--co-midnight-soft);
    --surface-raised: var(--co-slate);
    --border: var(--co-edge);
    --text-primary: var(--co-snow);
    --text-secondary: var(--co-mist);
    --accent: var(--co-teal);
  }
}

/* Explicit light register override */
:root[data-register="light"] {
  --co-abyss: #F7F8FA;
  --co-midnight: #FFFFFF;
  --co-midnight-soft: #F3F5F8;
  --co-slate: #F1F4F8;
  --co-edge: #DDE3EA;
  --co-snow: #10151F;
  --co-mist: #5B6679;
  --co-teal: #176B5D;
  --co-verdant: #16A34A;
  --co-sun: #CA8A04;
  --co-rose: #E11D48;

  --bg: var(--co-abyss);
  --surface: var(--co-midnight);
  --surface-soft: var(--co-midnight-soft);
  --surface-raised: var(--co-slate);
  --border: var(--co-edge);
  --text-primary: var(--co-snow);
  --text-secondary: var(--co-mist);
  --accent: var(--co-teal);
}

/* Scale down typography on smaller viewports */
@media (max-width: 1023px) {
  :root {
    --type-h1: 56px;
    --type-h2: 32px;
    --type-h3: 24px;
    --type-h4: 18px;
    --type-lead: 19px;
    --type-body: 16px;
    --gutter-lg: 48px;
  }
}

@media (max-width: 639px) {
  :root {
    --type-h1: 40px;
    --type-h2: 26px;
    --type-h3: 21px;
    --type-h4: 17px;
    --type-lead: 17px;
    --type-body: 15px;
    --gutter-lg: 24px;
    --gutter-md: 24px;
    --gutter-sm: 16px;
  }
}