/*
  ERRORMATIC TECHNOLOGIES — DESIGN TOKENS
  ----------------------------------------
  Dark enterprise theme. Structure/layout language references Digital Silk
  (oversized numerals, big pill buttons, editorial quote treatment, generous
  whitespace) but rendered dark: deep navy surfaces, an electric blue primary,
  violet + teal secondary accents, and glow treatments for depth.

  --c-ink / --c-paper / --c-paper-raised are BACKGROUND-ONLY tokens.
  --c-text / --c-slate are FOREGROUND-ONLY tokens. Keeping these roles on
  separate variables is what lets the whole site retheme from this file alone.

  Type: Space Grotesk (display) + IBM Plex Sans (body) + IBM Plex Mono (labels).
*/

:root {
  /* ---------- Color (dark theme) ----------
     Surface ramp is deliberately stepped so panels read as distinct layers
     instead of blending: ink (deepest) < paper (page) < raised (cards), with
     --c-line bright enough to actually draw an edge on both. Every text token
     below clears WCAG AA (4.5:1) on every surface it is used on. */
  --c-ink: #04060E;          /* deepest surface — footer, trust strip, CTA band */
  --c-ink-soft: #101838;     /* secondary deep surface (gradient partner) */
  --c-paper: #0B1124;        /* primary page background */
  --c-paper-raised: #22305C; /* card / raised surface — clearly lifted off the page */
  --c-text: #F4F6FB;         /* primary text — 17.3:1 on page, 11.8:1 on cards */
  --c-slate: #AFB8D4;        /* secondary text — 9.5:1 page, 6.5:1 cards */
  --c-slate-on-dark: #9AA4C8;/* secondary text on the deepest surfaces — 8.2:1 */
  --c-line: #425086;         /* borders — 2.4:1 vs page, 1.7:1 vs cards (visible) */
  --c-line-on-dark: #2A3560; /* borders on the deepest surfaces */
  --c-signal: #649BFF;       /* primary accent — 6.9:1 page, 4.7:1 cards */
  --c-signal-strong: #8FB8FF;/* hover/active — lighter, not darker, on dark UI */
  --c-signal-soft: rgba(100, 155, 255, 0.16);
  --c-circuit: #2EE0D0;      /* secondary accent — 11.3:1 page */
  --c-circuit-soft: rgba(46, 224, 208, 0.15);
  --c-violet: #B392FF;       /* tertiary accent — 7.6:1 page, 5.2:1 cards */
  --c-violet-strong: #C9B0FF;
  --c-violet-soft: rgba(179, 146, 255, 0.17);
  --c-warn: #FF9B72;         /* rare — error/emphasis only */

  --grad-brand: linear-gradient(135deg, #649BFF 0%, #B392FF 100%);
  --grad-dark: linear-gradient(160deg, #04060E 0%, #1E1550 100%);

  /* ---------- Glow (box-shadow / text-shadow accents) ---------- */
  --glow-signal: rgba(100, 155, 255, 0.45);
  --glow-violet: rgba(179, 146, 255, 0.45);
  --glow-circuit: rgba(46, 224, 208, 0.4);

  /* ---------- Type ---------- */
  --f-display: "Space Grotesk", "Arial Narrow", sans-serif;
  --f-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --f-mono: "IBM Plex Mono", "Courier New", monospace;

  /* Fluid type. The lower bound of each clamp is what a 320px phone gets,
     so those minimums are deliberately small — the previous scale bottomed
     out at 52px for h1, which overflowed narrow screens. Upper bounds are
     unchanged, so desktop looks exactly as before. */
  --fs-eyebrow: 0.75rem;
  --fs-body: 1rem;
  --fs-body-lg: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  --fs-h5: clamp(1.125rem, 1rem + 0.7vw, 1.5rem);
  --fs-h4: clamp(1.375rem, 1.15rem + 1.1vw, 2rem);
  --fs-h3: clamp(1.625rem, 1.25rem + 1.9vw, 2.75rem);
  --fs-h2: clamp(1.875rem, 1.3rem + 2.9vw, 4.25rem);
  --fs-h1: clamp(2.125rem, 1.3rem + 4.2vw, 6.5rem);
  --fs-giant: clamp(3.25rem, 2rem + 9vw, 11rem); /* oversized process numerals */

  --lh-tight: 0.98;
  --lh-snug: 1.2;
  --lh-normal: 1.6;

  /* ---------- Spacing scale (8px base) ---------- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  --sp-7: clamp(2.75rem, 1.9rem + 3.8vw, 5rem);
  --sp-8: clamp(3.5rem, 2.2rem + 5.8vw, 8rem);
  --sp-9: clamp(5rem, 3rem + 8.5vw, 11rem);

  --container-max: 1320px;
  --container-pad: clamp(1rem, 0.7rem + 1.6vw, 3.5rem);

  /* ---------- Radius ---------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-med: 0.5s;
  --dur-slow: 0.9s;

  /* ---------- Elevation (dark surfaces need deeper shadows) ---------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.55), 0 0 40px rgba(100, 155, 255, 0.12);
}