/* ==========================================================================
   ATOBAR-FLOW DESIGN SYSTEM TOKENS (css/tokens.css)
   Derived directly from images/atobar-logo.jpeg (2048x2048 pixel-art wolf crest)
   Color Space: OKLCH with exact hex fallbacks for seamless bitmap blending
   ========================================================================== */

:root {
  /* --- Primary Surfaces (Sampled from images/atobar-logo.jpeg) --- */
  --bg-canvas-hex: #edeef3;
  --bg-canvas: oklch(0.950 0.007 277.2);        /* Outer Logo Canvas (Ice Mist #edeef3) */
  --bg-surface: oklch(0.976 0.005 277.2);       /* Wolf Halo Cool White (#f6f7fb) */
  --bg-surface-alt: oklch(0.922 0.014 274.5);   /* Subtle recessed panel (#e2e5ef) */

  /* --- Sticky Inspector & Dark Stage Surfaces --- */
  --bg-stage-navy: oklch(0.290 0.099 266.8);    /* Outer Crest Ring Deep Navy (#15265c) */
  --bg-stage-navy-deep: oklch(0.228 0.078 266.8); /* Terminal / Code well inside Navy stage (#0d183b) */
  --bg-stage-indigo: oklch(0.487 0.103 265.3);  /* Inner Crest Sky Slate Indigo (#435d9a) */
  --border-on-navy: oklch(0.420 0.090 265.3);   /* Crisp 1px structural border on dark stage */

  /* --- Typography Ink Ramp on Light Canvas (All >= 5.3:1 AA/AAA) --- */
  --ink-primary: oklch(0.185 0.032 266.8);      /* Pixel Outline Ink (#0c1222) — 15.2:1 on canvas */
  --ink-secondary: oklch(0.380 0.012 225.0);    /* Beanie Charcoal (#3b4348) — 8.4:1 on canvas */
  --ink-muted: oklch(0.455 0.014 240.0);        /* Wolf Fur Slate (#515960) — 5.9:1 on canvas */

  /* --- Typography Ink Ramp on Dark Navy Stage (All >= 7.0:1 AAA) --- */
  --ink-on-navy: oklch(0.968 0.007 277.2);      /* Crisp Cool White (#f3f4f9) — 11.8:1 on navy */
  --ink-on-navy-secondary: oklch(0.865 0.025 268.0); /* Indigo Mist (#cfd6ea) — 8.2:1 on navy */
  --ink-on-navy-muted: oklch(0.775 0.040 264.0);/* Muted Slate on Navy (#a9b6d8) — 5.6:1 on navy */

  /* --- Brand Accents & Honest Status Reality Badges --- */
  --accent-cobalt: oklch(0.531 0.131 254.5);    /* Wolf Tie Royal Cobalt (#2f6db6) */
  --accent-cobalt-ink: oklch(0.395 0.125 256.0);/* Deep Cobalt for AA text on light (#174987) — 7.4:1 */
  --accent-cobalt-tint: oklch(0.932 0.028 256.0);/* Soft Cobalt badge fill on light (#dfe9f6) */

  --accent-violet: oklch(0.566 0.123 299.2);    /* Right Pixel Confetti Violet (#8164b4) */
  --accent-violet-ink: oklch(0.390 0.135 299.2);/* Deep Violet for AA text on light (#513282) — 7.8:1 */
  --accent-violet-tint: oklch(0.932 0.028 299.2);/* Soft Violet badge fill on light (#ebe3f5) */

  --accent-pink: oklch(0.751 0.174 353.3);      /* Wolf Shirt Rebel Pink (#ff7ab7) — 6.3:1 on navy */
  --accent-pink-ink: oklch(0.455 0.185 353.3);  /* Darkened Rebel Pink for AA text on light (#9b1554) — 6.6:1 */
  --accent-pink-tint: oklch(0.935 0.032 353.3); /* Soft Rebel Pink badge fill on light (#f9e2ec) */

  --accent-cyan: oklch(0.763 0.095 246.4);      /* Lower-Right Confetti Sky Cyan (#7fb8eb) — 6.8:1 on navy */
  --accent-emerald-on-navy: oklch(0.815 0.135 162.0); /* Verified pass indicator on navy (#5ce0a8) */

  /* --- Structural Borders --- */
  --border-hairline: oklch(0.845 0.020 272.0);  /* Indigo-Tinted Hairline (#c7cde0) */
  --border-strong: oklch(0.680 0.035 268.0);    /* Emphasized structural border (#929cb8) */

  /* --- Typography Families (Zero Reflex-Reject Fonts) --- */
  --font-display: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Commit Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* --- Modular Type Scale (1.25 Ratio, Fluid clamp()) --- */
  --text-h1: clamp(2.15rem, 3.4vw + 1rem, 3.35rem);
  --text-h2: clamp(1.60rem, 2.1vw + 0.8rem, 2.30rem);
  --text-h3: clamp(1.22rem, 1.1vw + 0.75rem, 1.52rem);
  --text-h4: clamp(1.0625rem, 0.5vw + 0.85rem, 1.2rem);
  --text-body: 1.0625rem;   /* 17px */
  --text-small: 0.9375rem;  /* 15px */
  --text-xs: 0.8125rem;     /* 13px */
  --text-code: 0.84375rem;  /* 13.5px */

  /* --- 4pt Spatial Rhythm Scale --- */
  --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-8: 2rem;     /* 32px */
  --space-10: 2.5rem;  /* 40px */
  --space-12: 3rem;    /* 48px */
  --space-16: 4rem;    /* 64px */
  --space-20: 5rem;    /* 80px */
  --space-24: 6rem;    /* 96px */

  /* --- Crisp Pixel-Respecting Radii (Max 6px on containers) --- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-pill: 999px;

  /* --- Semantic Z-Index Scale --- */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-modal-backdrop: 30;
  --z-modal: 40;
  --z-toast: 50;
  --z-tooltip: 60;

  /* --- Motion Curves (Exponential Ease-Out, Zero Bounce) --- */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 150ms;
  --duration-normal: 240ms;
}