/* ==========================================================================
   FERNGLAS — PRIMITIVE TOKENS. Theme-independent raw values, brand-agnostic.
   Nothing here is used directly by components; semantic.css maps these into
   meaningful roles (bg/text/accent/feedback/etc). See README.md.

   Custom properties use plain, self-explanatory names (--space-4, --accent,
   --border) with no namespace prefix — readability over collision-safety.
   If a consuming project defines its own --accent or --space-4, override
   this file's value last in cascade order, or rename on copy.
   ========================================================================== */
:root {
  /* --fg-color token alias -- */
  --fg-color: #1c1c1f;
  /* -- Gray scale (neutral surface/text ramp) -- */
  --color-gray-0: #ffffff;
  --color-gray-50: #f7f7f8;
  --color-gray-100: #eeeef0;
  --color-gray-200: #dcdce0;
  --color-gray-300: #c2c2c9;
  --color-gray-400: #9d9da6;
  --color-gray-500: #78787f;
  --color-gray-600: #5a5a61;
  --color-gray-700: #424247;
  --color-gray-800: #2a2a2e;
  --color-gray-900: #1c1c1f;
  --color-gray-950: #101012;

  /* -- Feedback palette (correctness/alerts) — brand-agnostic on purpose,
     so a project's own accent color (whatever hue it picks) never gets
     confused with a success/error/warning/info state -- */
  --color-green-100: #dcf3e3;
  --color-green-600: #1f8a4c;
  --color-green-700: #166b3a;
  --color-rose-100: #fbe0e2;
  --color-rose-600: #c62f3d;
  --color-rose-700: #a4232f;
  --color-amber-100: #fbeecb;
  --color-amber-600: #a3720f;
  --color-blue-100: #dcecfb;
  --color-blue-600: #1a6bb0;

  /* -- Extra brand-accent hues — additional filled-button colors for a
     project that wants more than one "louder than ghost, not the primary
     accent, not a feedback state" option (e.g. a secondary CTA, or a
     brand palette color repurposed for a specific action). Distinct hue
     families from the feedback palette above on purpose, same reason: so
     picking one for a button never reads as a correctness signal. -- */
  --color-navy-600: #123a66;
  --color-ruby-600: #97182a;
  --color-gold-600: #8a6c1a;

  /* -- Spacing scale (4px base). --space-0 is the one deliberate
     half-step below the base unit — a recurring hairline nudge (a tight
     chip's padding, a menu/list's internal row gap) that components.css
     already reached for as a bare "2px" in several places; named here so
     it's a token, not a repeated magic number. -- */
  --space-0: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* -- Type scale -- */
  --text-xs: 12px;
  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  /* Hero/display headings only (onboarding, empty-state, marketing) —
     never body UI chrome. The scale otherwise tops out at 4xl on
     purpose; this is the one deliberate exception. */
  --text-5xl: 48px;
  /* For a single glyph/digit with no descender to clear (an icon-btn's
     icon, a notification badge's count) — kills the font's built-in
     line-box padding so the glyph centers exactly instead of sitting
     slightly high. Never for real text, even one line of it. */
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-normal: 1.5;
  /* For long-form body copy (prose, hint paragraphs) — tight/normal stay
     the right call for UI chrome (labels, buttons, one-line hints). */
  --leading-relaxed: 1.65;
  /* -- Weight scale — a named step per weight actually used across
     components, so a heavier/lighter step is a token swap, not a guess
     at a new raw number. -- */
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  /* -- Tracking (letter-spacing): tight for large headings (keeps big
     type from looking loose), wide for small uppercase labels (keeps
     all-caps text legible at 12px) -- */
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --font-sans:
    system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
  /* No external fonts: zero network fetch on first paint, nothing for a
     strict extension/app CSP to block. */

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

  /* -- Shadows (light-mode values; dark mode uses stronger alpha via
     semantic.css) -- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 1px 1px rgb(0 0 0 / 0.04);
  --shadow-2: 0 2px 8px rgb(0 0 0 / 0.10), 0 1px 2px rgb(0 0 0 / 0.06);
  --shadow-3: 0 8px 24px rgb(0 0 0 / 0.16), 0 2px 6px rgb(0 0 0 / 0.08);

  /* -- Motion -- */
  --dur-instant: 50ms;
  --dur-fast: 100ms;
  --dur-base: 200ms;
  --dur-slow: 350ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.3, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* -- Z-index scale -- */
  --z-nav: 10;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;

  /* -- Breakpoints (reference only — CSS can't var() a @media condition;
     copy these literal values into your own @media queries so every
     Fernglas-based project breaks at the same widths). See README.md. -- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;

  /* -- Opacity (currently just the one shared disabled-state value every
     interactive component's :disabled rule repeated as a literal 0.5) -- */
  --opacity-disabled: 0.5;

  /* -- Border width -- */
  --border-width-thin: 1px;
  --border-width-thick: 2px;

  /* -- Control height (tap-target floor) — a dedicated scale, not reused
     from --space-*, because 44px is a fixed accessibility constant
     (iOS HIG / WCAG 2.5.5), not a spacing-rhythm value. Every clickable
     control (.btn, .icon-btn, .input, .select) sizes off this at md, so
     a button and an input sitting in the same row are always the same
     height. Never scaled down by [data-density] — see that block below. -- */
  --control-height-sm: 36px;
  --control-height-md: 44px;
  --control-height-lg: 52px;

  /* -- Container widths (named steps for .container[data-width], layout.css) -- */
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;

  /* -- Data-viz categorical palette — 8 hues, fixed order, validated (both
     light and dark re-checked against this file's own --color-gray-0/900
     surfaces, not assumed) via the dataviz skill's validate_palette.js:
     CVD ΔE >= 8.4, normal-vision ΔE >= 19.3 on every adjacent pair in both
     modes. NEVER reorder or cycle these per-consumer — the order IS the
     colorblind-safety mechanism (candidate orderings were enumerated and
     only gate-clearing ones kept). Only the first 3 slots (blue/orange/aqua)
     clear the stricter all-pairs floor needed for scatter/bubble/small-
     multiples; past 3 series, fold into "Other" or facet instead of adding
     a 4th all-pairs series. Slots 3-5 (aqua/yellow/magenta) sit under 3:1
     contrast on the light surface — pair with visible direct labels or a
     table view, never color alone, same relief rule as the feedback
     palette's warn/serious tokens. -- */
  --dataviz-color-blue-light: #2a78d6;
  --dataviz-color-blue-dark: #3987e5;
  --dataviz-color-orange-light: #eb6834;
  --dataviz-color-orange-dark: #d95926;
  --dataviz-color-aqua-light: #1baf7a;
  --dataviz-color-aqua-dark: #199e70;
  --dataviz-color-yellow-light: #eda100;
  --dataviz-color-yellow-dark: #c98500;
  --dataviz-color-magenta-light: #e87ba4;
  --dataviz-color-magenta-dark: #d55181;
  --dataviz-color-green-light: #008300;
  --dataviz-color-green-dark: #008300;
  --dataviz-color-violet-light: #4a3aa7;
  --dataviz-color-violet-dark: #9085e9;
  --dataviz-color-red-light: #e34948;
  --dataviz-color-red-dark: #e66767;
}

/* -- Density: the --space-* scale above is the default ("comfortable")
   density. A cramped surface (browser-extension popup, a dense toolbar)
   opts into a tighter rhythm via [data-density="compact"] on any ancestor
   (:root, or a scoped container) instead of hand-picking smaller steps
   component-by-component. Exactly 75% of each comfortable value — the one
   ratio that lands every step on a whole pixel. A separate rule (not
   nested inside :root above) on purpose — this file must parse in any
   browser a zero-build project targets, not just ones with native CSS
   nesting support (same reasoning as layout.css's gap overrides).
   Deliberately does NOT touch --control-height-*: a touch target's 44px
   floor is an accessibility constant, not a spacing choice, and doesn't
   shrink just because the surface is cramped. -- */
[data-density='compact'] {
  --space-1: 3px;
  --space-2: 6px;
  --space-3: 9px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 18px;
  --space-7: 24px;
  --space-8: 30px;
  --space-9: 36px;
  --space-10: 48px;
}