/* ============================================================
   BlueDot Design System — Primitive Tokens
   Source of truth. Do not inline these values anywhere else.
   See bluedot-design-2026/specs/2026-04-28-shared-tokens-css-design.md
   ============================================================ */

:root {
  /* ============================================================
     1. Color
     ============================================================ */

  /* 1a. HSL ramps + neutrals */
  /* Concern families — L-numbered 5-stop ladders (recipe v2: S=100, hue-locked) */
  --red-20:           hsl(0, 100%, 20%);
  --red-38:           hsl(0, 100%, 38%);
  --red-56:           hsl(0, 100%, 56%);
  --red-80:           hsl(0, 100%, 80%);
  --red-96:           hsl(0, 100%, 96%);
  --purple-20:        hsl(272, 100%, 20%);
  --purple-38:        hsl(272, 100%, 38%);
  --purple-56:        hsl(272, 100%, 56%);
  --purple-80:        hsl(272, 100%, 80%);
  --purple-96:        hsl(272, 100%, 96%);
  --blue-20:          hsl(232, 100%, 20%);
  --blue-38:          hsl(232, 100%, 38%);
  --blue-56:          hsl(232, 100%, 56%);
  --blue-80:          hsl(232, 100%, 80%);
  --blue-96:          hsl(232, 100%, 96%);
  --blue-98:          hsl(232, 100%, 98%);   /* off-ladder: Watchlist second-strip bg */
  --seafoam-mid:      hsl(191, 100%, 56%);
  --seafoam-light:    hsl(190, 100%, 94%);
  --seafoam-ultradark: hsl(192, 100%, 10%);
  --fuchsia-mid:      hsl(333, 100%, 38%);
  --disabled-fg:      hsl(192, 10%, 55%);
  --black:            #000000;
  --white:            #FFFFFF;

  /* 1b. Page-bg */
  --page-bg:          #EEF9FB;

  /* 1c. Data-viz palette (categorical L=44 + sequential blue) */
  --cat-orange:       hsl(30, 100%, 44%);
  --cat-sky-blue:     hsl(200, 100%, 44%);
  --cat-magenta:      hsl(300, 100%, 44%);
  --cat-fuchsia:      hsl(333, 100%, 44%);

  --seq-blue-94:      hsl(232, 100%, 94%);
  --seq-blue-74:      hsl(232, 100%, 74%);
  --seq-blue-54:      hsl(232, 100%, 54%);
  --seq-blue-34:      hsl(232, 100%, 34%);
  --seq-blue-14:      hsl(232, 100%, 14%);


  /* ============================================================
     2. Typography
     ============================================================ */
  --t-display:    700 48px/1.15 'Source Sans 3', system-ui, sans-serif;
  --t-h1:         600 32px/1.25 'Source Sans 3', system-ui, sans-serif;
  --t-h2:         600 20px/1.4 'Source Sans 3', system-ui, sans-serif;
  --t-body:       400 16px/1.5 'Source Sans 3', system-ui, sans-serif;
  --t-body-bold:  700 16px/1.5 'Source Sans 3', system-ui, sans-serif;
  --t-caption:    400 14px/1.5 'Source Sans 3', system-ui, sans-serif;
  --t-mono:       400 14px/1.5 'Source Code Pro', ui-monospace, monospace;
  --t-mono-bold:  700 16px/1.5 'Source Code Pro', ui-monospace, monospace;


  /* ============================================================
     3. Spacing
     ============================================================ */
  --space-0:   0;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  16px;
  --space-xl:  24px;
  --space-2xl: 32px;
  --space-3xl: 48px;
  --space-4xl: 64px;
  --space-5xl: 96px;


  /* ============================================================
     4. Layout / grid / breakpoints
     ============================================================ */

  /* 4a. Breakpoints */
  --bp-sm: 640px;
  --bp-md: 1024px;
  --bp-lg: 1280px;
  --bp-xl: 1600px;

  /* 4b. Layout dimensions */
  --slide-width:           1920px;
  --slide-height:          1080px;
  --document-width-letter: 612pt;
  --document-height-letter: 792pt;
  --document-width-a4:     595pt;
  --document-height-a4:    842pt;
  --document-margin:       72pt;
  --card-padding:          var(--space-2xl);
  --card-radius:           var(--space-md);
  --card-gap:              var(--space-2xl);
  --content-max-width:     720px;


  /* ============================================================
     5. Elevation
     ============================================================ */

  /* 5a. Shadow */
  --shadow-popover: 0 2px 4px rgba(0,41,51,0.08), 0 4px 8px rgba(0,41,51,0.06);
  --shadow-modal:   0 4px 8px rgba(0,41,51,0.10), 0 16px 32px rgba(0,41,51,0.12);
  --shadow-toast:   0 8px 16px rgba(0,41,51,0.14), 0 24px 48px rgba(0,41,51,0.16);

  /* 5b. Z-index */
  --z-base:           0;
  --z-dropdown:       100;
  --z-sticky:         200;
  --z-modal-backdrop: 800;
  --z-modal:          900;
  --z-toast:          1000;
  --z-tooltip:        1100;


  /* ============================================================
     6. Iconography
     ============================================================ */
  --icon-xs:     var(--space-md);
  --icon-sm:     var(--space-lg);
  --icon-md:     var(--space-xl);
  --icon-lg:     var(--space-2xl);
  --icon-xl:     var(--space-3xl);
  --icon-stroke: 2px;


  /* ============================================================
     7. Logo & clearspace
     ============================================================ */
  --logo-dot-color:    hsl(190, 100%, 44%);
  --logo-dot-gradient: radial-gradient(circle at 78% 22%, rgba(0,187,224,0.64) 0%, rgba(0,187,224,1.00) 100%);
  --logo-clearspace:   22px;


  /* ============================================================
     8. Density — RESERVED. No values yet (Phase 1.10).
     ============================================================ */


  /* ============================================================
     9. Accessibility — RESERVED. No values yet (Phase 1.11).
     ============================================================ */
}

/* ============================================================
   Reserved theme/medium overrides — populate in later phases
   ============================================================ */

[data-theme="dark"] {
  /* Overrides expected: color tokens (semantic surface/text mappings),
     shadow tokens (lighter elevations), focus-ring tokens (3:1 against dark surfaces). */
}

[data-medium="slide"] {
  /* Overrides expected: --space-* (macro variant for 16:9), --t-*
     (slide-projection sizes), --icon-stroke (slide-projection variant). */
}

[data-medium="document"] {
  /* Overrides expected: --space-* (letter/A4 macro), --t-* (document
     scale), --grid-* (document columns). */
}