/*
  Design tokens: the single source of visual truth.
  Components and views use semantic tokens only. Rebrand by editing primitives;
  re-theme by remapping semantic tokens.
*/

/* Cascade layer order: later layers win. Layout may override component defaults. */
@layer tokens, base, components, layout, utilities, print;

@layer tokens {
  :root {
    /* ---------- Primitives: palette ---------- */
    --navy-900: #1a1740;
    --navy-800: #221e50;
    --navy-700: #2b2660; /* brand */
    --navy-500: #4a4590;
    --navy-300: #8e89d9;
    --navy-100: #e6e5f2;
    --navy-50: #f3f2f9;
    --orange-700: #b93d1c; /* accessible accent text on light */
    --orange-500: #e9522b; /* brand accent */
    --orange-300: #f59a7e;
    --orange-100: #fce6df;
    --neutral-0: #fff;
    --neutral-50: #f7f8fa;
    --neutral-100: #f0f1f4;
    --neutral-200: #e2e4ea;
    --neutral-300: #c7cbd6;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #12111f;
    --green-700: #1f7a4d;
    --green-100: #e3f2ea;
    --amber-700: #9a5b06;
    --amber-100: #fdf0d9;
    --red-700: #b42318;
    --red-100: #fde7e5;
    --blue-700: #1d5fa8;
    --blue-100: #e2edf8;
    --teal-500: #3a8f8a;
    --periwinkle-400: #8a93c9;
    --ochre-500: #c9a227;

    /* ---------- Primitives: type ---------- */
    --font-sans: system-ui, -apple-system, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif;
    --font-mono: ui-monospace, "SFMono-Regular", menlo, consolas, monospace;
    --size-12: 0.75rem;
    --size-14: 0.875rem;
    --size-16: 1rem;
    --size-18: 1.125rem;
    --size-20: 1.25rem;
    --size-24: 1.5rem;
    --size-30: 1.875rem;
    --size-36: 2.25rem;
    --size-48: 3rem;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --leading-tight: 1.2;
    --leading-normal: 1.5;

    /* ---------- Primitives: space, shape, depth, motion ---------- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;
    --shadow-1: 0 1px 2px rgb(17 24 39 / 6%), 0 1px 3px rgb(17 24 39 / 8%);
    --shadow-2: 0 4px 12px rgb(17 24 39 / 10%);
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --easing-standard: cubic-bezier(0.2, 0, 0, 1);
    --content-max: 80rem;
    --sidebar-width: 15rem;
    --topbar-height: 3.5rem;
    --drawer-width: 28rem;
    --tooltip-max: 18rem;

    /* Breakpoints (documented values; media queries cannot read custom properties):
       --bp-tablet 48rem (768px), --bp-desktop 64rem (1024px), --bp-wide 90rem (1440px) */

    /* Layering */
    --z-base: 1;
    --z-sticky: 10;
    --z-drawer: 40;
    --z-overlay: 50;
    --z-dialog: 60;
    --z-toast: 70;
    --z-tour: 80;
    --border-width: 1px;
    --focus-width: 3px;
    --duration-slow: 320ms;

    /* ---------- Semantic: light theme (default) ---------- */
    color-scheme: light;

    --color-bg: var(--neutral-50);
    --color-surface: var(--neutral-0);
    --color-surface-raised: var(--neutral-0);
    --color-surface-muted: var(--neutral-100);
    --color-border: var(--neutral-200);
    --color-border-strong: var(--neutral-300);
    --color-text: var(--neutral-800);
    --color-text-muted: var(--neutral-600);
    --color-text-subtle: var(--neutral-500);
    --color-text-inverse: var(--neutral-0);
    --color-brand: var(--navy-700);
    --color-brand-strong: var(--navy-900);
    --color-brand-soft: var(--navy-50);
    --color-on-brand: var(--neutral-0);
    --color-accent: var(--orange-500);
    --color-accent-text: var(--orange-700);
    --color-accent-soft: var(--orange-100);
    --color-on-accent: var(--neutral-0);
    --color-focus: var(--orange-500);
    --color-success-text: var(--green-700);
    --color-success-bg: var(--green-100);
    --color-warning-text: var(--amber-700);
    --color-warning-bg: var(--amber-100);
    --color-danger-text: var(--red-700);
    --color-danger-bg: var(--red-100);
    --color-info-text: var(--blue-700);
    --color-info-bg: var(--blue-100);
    --color-chart-1: var(--navy-700);
    --color-chart-2: var(--teal-500);
    --color-chart-3: var(--periwinkle-400);
    --color-chart-4: var(--ochre-500);
    --color-chart-5: var(--neutral-500);
    --color-chart-6: var(--orange-500);
    --color-chart-grid: var(--neutral-200);
    --color-chart-axis: var(--neutral-600);
    --color-overlay: rgb(17 24 39 / 55%);
    --color-highlight: var(--orange-500);
    --color-synthetic-bg: var(--navy-50);
    --color-synthetic-text: var(--navy-700);
    --color-nav-bg: var(--navy-700);
    --color-nav-text: var(--navy-100);
    --color-nav-active-bg: var(--navy-900);
    --color-nav-active-text: var(--neutral-0);
  }

  /* ---------- Semantic: dark theme ---------- */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      color-scheme: dark;

      --color-bg: var(--neutral-950);
      --color-surface: #1c1b2e;
      --color-surface-raised: #25243b;
      --color-surface-muted: #25243b;
      --color-border: #34334d;
      --color-border-strong: #4a4966;
      --color-text: #ececf4;
      --color-text-muted: #b9bccb;
      --color-text-subtle: #a3a7b8;
      --color-text-inverse: var(--neutral-950);
      --color-brand: var(--navy-300);
      --color-brand-strong: #b6b2ec;
      --color-brand-soft: #25243b;
      --color-on-brand: var(--neutral-950);
      --color-accent: #f07a57;
      --color-accent-text: var(--orange-300);
      --color-accent-soft: #3a2420;
      --color-on-accent: var(--neutral-950);
      --color-focus: var(--orange-300);
      --color-success-text: #6fcf9d;
      --color-success-bg: #173426;
      --color-warning-text: #f2c063;
      --color-warning-bg: #3a2b10;
      --color-danger-text: #f29a92;
      --color-danger-bg: #3d1a17;
      --color-info-text: #8cbcf0;
      --color-info-bg: #162a40;
      --color-chart-1: var(--navy-300);
      --color-chart-2: #5fb8b2;
      --color-chart-3: #b6bce6;
      --color-chart-4: #e0be52;
      --color-chart-5: #9ca3af;
      --color-chart-6: #f07a57;
      --color-chart-grid: #34334d;
      --color-chart-axis: #b9bccb;
      --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
      --shadow-2: 0 4px 12px rgb(0 0 0 / 50%);
      --color-overlay: rgb(0 0 0 / 65%);
      --color-highlight: var(--orange-300);
      --color-synthetic-bg: #25243b;
      --color-synthetic-text: #b6b2ec;
      --color-nav-bg: #15142a;
      --color-nav-text: #c9c7ea;
      --color-nav-active-bg: #2c2a4a;
      --color-nav-active-text: #fff;
    }
  }

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

    --color-bg: var(--neutral-950);
    --color-surface: #1c1b2e;
    --color-surface-raised: #25243b;
    --color-surface-muted: #25243b;
    --color-border: #34334d;
    --color-border-strong: #4a4966;
    --color-text: #ececf4;
    --color-text-muted: #b9bccb;
    --color-text-subtle: #a3a7b8;
    --color-text-inverse: var(--neutral-950);
    --color-brand: var(--navy-300);
    --color-brand-strong: #b6b2ec;
    --color-brand-soft: #25243b;
    --color-on-brand: var(--neutral-950);
    --color-accent: #f07a57;
    --color-accent-text: var(--orange-300);
    --color-accent-soft: #3a2420;
    --color-on-accent: var(--neutral-950);
    --color-focus: var(--orange-300);
    --color-success-text: #6fcf9d;
    --color-success-bg: #173426;
    --color-warning-text: #f2c063;
    --color-warning-bg: #3a2b10;
    --color-danger-text: #f29a92;
    --color-danger-bg: #3d1a17;
    --color-info-text: #8cbcf0;
    --color-info-bg: #162a40;
    --color-chart-1: var(--navy-300);
    --color-chart-2: #5fb8b2;
    --color-chart-3: #b6bce6;
    --color-chart-4: #e0be52;
    --color-chart-5: #9ca3af;
    --color-chart-6: #f07a57;
    --color-chart-grid: #34334d;
    --color-chart-axis: #b9bccb;
    --shadow-1: 0 1px 2px rgb(0 0 0 / 40%);
    --shadow-2: 0 4px 12px rgb(0 0 0 / 50%);
    --color-overlay: rgb(0 0 0 / 65%);
    --color-highlight: var(--orange-300);
    --color-synthetic-bg: #25243b;
    --color-synthetic-text: #b6b2ec;
    --color-nav-bg: #15142a;
    --color-nav-text: #c9c7ea;
    --color-nav-active-bg: #2c2a4a;
    --color-nav-active-text: #fff;
  }

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