/* ─────────────────────────────────────────────────────────────
   Northstar Design System — Single Source of Truth Tokens.

   Modern, high-velocity design system configured for AI-assisted
   workflows and rapid iteration with strict uniformity.

   Tokens utilize CSS Color 4 lab(...) space:
   • Dark: Pitch black, deep cards, radiant electric mint primary
   • Light: Pure white daylight, crisp charcoal primary, high contrast
   ───────────────────────────────────────────────────────────── */

/* ── Global scale, typography & spacing ───────────────────────── */
:root {
  /* Global amplifier: scales every rem-based font size & spacing */
  --root-font-size: 112%;

  /* ── Type scale (rem-based, 9→28px grid) ── */
  --text-3xs: 0.5625rem;                    /*  9px  micro labels    */
  --text-2xs: 0.625rem;                     /* 10px  eyebrows, meta  */
  --text-xs:  0.6875rem;                    /* 11px  buttons, nav    */
  --text-sm:  0.75rem;                      /* 12px  inputs, copy    */
  --text-md:  0.875rem;                     /* 14px  longform body   */
  --text-base: 1rem;                        /* 16px  ledes, brand    */
  --text-lg:  1.3125rem;                    /* 21px  card headings   */
  --text-xl:  1.5625rem;                    /* 25px  sub-headlines   */
  --text-2xl: 1.75rem;                      /* 28px  section titles  */
  --text-hero: clamp(2.625rem, 5vw, 4.375rem); /* 42→70px display    */

  /* ── Type families ────────────────────────── */
  --font-sans: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* ── Spacing (4px rhythm) ─────────────────── */
  --space-1: 0.25rem;   /*  4px */
  --space-2: 0.5rem;    /*  8px */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-7: 2rem;      /* 32px */
  --space-8: 2.5rem;    /* 40px */
  --space-9: 3rem;      /* 48px */
  --space-10: 4rem;     /* 64px */
  --space-11: 5rem;     /* 80px */

  /* ── Radii ────────────────────────────────── */
  --radius-sm: 5px;
  --radius-md: 6px;
  --radius-lg: 9px;
  --radius-xl: 12px;
  --radius-2xl: 14px;
  --radius-pill: 9999px;

  /* ── Focus ────────────────────────────────── */
  --focus-ring: 2px solid var(--ring);
  --focus-offset: 2px;
}

/* ── Light Palette (Exact lab() Specification) ───────────────── */
:root,
:root[data-theme='light'],
.light {
  color-scheme: light;

  --background: lab(100% 0 0);
  --foreground: lab(2.75381% 0 0);
  --card: lab(97.68% -.0000298023 .0000119209);
  --card-foreground: lab(2.75381% 0 0);
  --popover: lab(100% 0 0);
  --popover-foreground: lab(2.75381% 0 0);
  --primary: lab(7.78201% -.0000149012 0);
  --primary-foreground: lab(98.26% 0 0);
  --secondary: lab(94.2% 0 0);
  --secondary-foreground: lab(7.78201% -.0000149012 0);
  --muted: lab(94.2% 0 0);
  --muted-foreground: lab(39.68% 0 0);
  --accent: lab(94.2% 0 0);
  --accent-foreground: lab(7.78201% -.0000149012 0);
  --destructive: lab(48.4493% 77.4328 61.5452);
  --destructive-foreground: lab(48.4493% 77.4328 61.5452);
  --border: lab(86.08% -.0000298023 0);
  --input: lab(86.08% -.0000298023 0);
  --ring: lab(42% 0 0);
  --chart-1: lab(57.1026% 64.2584 89.8886);
  --chart-2: lab(55.0223% -41.0774 -3.90277);
  --chart-3: lab(30.372% -13.1853 -18.7887);
  --chart-4: lab(80.1641% 16.6016 99.2089);
  --chart-5: lab(72.7183% 31.8672 97.9407);
  --sidebar: lab(96.52% -.0000298023 .0000119209);
  --sidebar-foreground: lab(2.75381% 0 0);
  --sidebar-primary: lab(7.78201% -.0000149012 0);
  --sidebar-primary-foreground: lab(98.26% 0 0);
  --sidebar-accent: lab(94.2% 0 0);
  --sidebar-accent-foreground: lab(7.78201% -.0000149012 0);
  --sidebar-border: lab(86.08% -.0000298023 0);
  --sidebar-ring: lab(42% 0 0);
  --dot-color: lab(7.78201% -.0000149012 0 / .05);

  /* ── Legacy Northstar mappings for light theme ── */
  --bg: var(--background);
  --bg-deep: var(--sidebar);
  --panel: var(--card);
  --panel-2: var(--secondary);
  --panel-3: color-mix(in srgb, var(--card) 85%, var(--border));
  --panel-hover: color-mix(in srgb, var(--card) 70%, var(--border));
  --panel-active: color-mix(in srgb, var(--secondary) 85%, var(--border));

  --line: var(--border);
  --line-soft: var(--sidebar-border);
  --line-hover: var(--ring);
  --line-focus: var(--ring);

  --text: var(--foreground);
  --text-bright: var(--foreground);
  --text-soft: var(--muted-foreground);
  --text-code: var(--foreground);
  --subtle: color-mix(in srgb, var(--muted-foreground) 75%, transparent);

  --accent-brand: var(--primary);
  --accent-contrast: var(--primary-foreground);
  --positive: var(--chart-2);
  --warning: var(--chart-3);
  --critical: var(--destructive);
  --pink: var(--chart-5);
  --blue: var(--chart-4);
}

/* ── Dark Palette (Exact lab() Specification) ────────────────── */
:root:not([data-theme='light']),
:root[data-theme='dark'],
.dark {
  color-scheme: dark;

  --background: lab(0% 0 0);
  --foreground: lab(94.78% 0 0);
  --card: lab(.903296% 0 0);
  --card-foreground: lab(94.78% 0 0);
  --popover: lab(.903296% 0 0);
  --popover-foreground: lab(94.78% 0 0);
  --primary: lab(89.9321% -47.9163 -15.7303);
  --primary-foreground: lab(0% 0 0);
  --secondary: lab(2.47865% 0 0);
  --secondary-foreground: lab(94.78% 0 0);
  --muted: lab(2.47865% 0 0);
  --muted-foreground: lab(60.56% 0 0);
  --accent: lab(1.98454% 0 0);
  --accent-foreground: lab(89.9321% -47.9163 -15.7303);
  --destructive: lab(54.5811% 71.684 50.9279);
  --destructive-foreground: lab(54.5811% 71.684 50.9279);
  --border: lab(4.8411% 0 0);
  --input: lab(1.98454% 0 0);
  --ring: lab(89.9321% -47.9163 -15.7303);
  --chart-1: lab(89.9321% -47.9163 -15.7303);
  --chart-2: lab(66.9756% -58.27 19.5419);
  --chart-3: lab(72.7183% 31.8672 97.9407);
  --chart-4: lab(52.0183% 66.11 -78.2316);
  --chart-5: lab(56.101% 79.4328 31.4532);
  --sidebar: lab(.498049% 0 0);
  --sidebar-foreground: lab(94.78% 0 0);
  --sidebar-primary: lab(89.9321% -47.9163 -15.7303);
  --sidebar-primary-foreground: lab(0% 0 0);
  --sidebar-accent: lab(1.98454% 0 0);
  --sidebar-accent-foreground: lab(89.9321% -47.9163 -15.7303);
  --sidebar-border: lab(4.8411% 0 0);
  --sidebar-ring: lab(89.9321% -47.9163 -15.7303);
  --dot-color: lab(89.9321% -47.9163 -15.7303 / .045);

  /* ── Legacy Northstar mappings for dark theme ── */
  --bg: var(--background);
  --bg-deep: var(--sidebar);
  --panel: var(--card);
  --panel-2: var(--secondary);
  --panel-3: color-mix(in srgb, var(--card) 85%, var(--border));
  --panel-hover: color-mix(in srgb, var(--card) 60%, var(--border));
  --panel-active: color-mix(in srgb, var(--secondary) 75%, var(--border));

  --line: var(--border);
  --line-soft: var(--sidebar-border);
  --line-hover: color-mix(in srgb, var(--ring) 50%, var(--border));
  --line-focus: var(--ring);

  --text: var(--foreground);
  --text-bright: var(--foreground);
  --text-soft: var(--muted-foreground);
  --text-code: var(--foreground);
  --subtle: color-mix(in srgb, var(--muted-foreground) 65%, transparent);

  --accent-brand: var(--primary);
  --accent-contrast: var(--primary-foreground);
  --positive: var(--chart-2);
  --warning: var(--chart-3);
  --critical: var(--destructive);
  --pink: var(--chart-5);
  --blue: var(--chart-4);
}

html {
  font-size: var(--root-font-size);
}