/* ==========================================================================
   BlueLogic Digital — Design Tokens
   Engineered technology brand: dark graphite/navy surfaces, blue signal
   accent, editorial type scale (Space Grotesk display / IBM Plex Sans body /
   IBM Plex Mono technical labels).
   ========================================================================== */

:root{
  /* ---- surfaces (layered depth, not flat black) ---- */
  --surface-0:#171c25;      /* page base */
  --surface-1:#1c222c;      /* section alt */
  --surface-2:#242b37;      /* raised card */
  --surface-3:#2d3542;      /* hover / active raised */
  --surface-line:rgba(163,181,207,0.16);
  --surface-line-strong:rgba(163,181,207,0.32);

  /* ---- ink ---- */
  --ink-0:#f4f7fb;          /* headings */
  --ink-1:#c7d2e0;          /* body */
  --ink-2:#8695ab;          /* muted / secondary */
  --ink-3:#7c8ba1;          /* faint / metadata — kept ≥4.5:1 on surface-0 for WCAG AA */

  /* ---- signal (brand blue, engineered not neon) ---- */
  --signal-0:#4f8dff;
  --signal-1:#2f6fed;
  --signal-2:#1c4fc4;
  --signal-glow:rgba(79,141,255,0.35);
  --signal-dim:rgba(79,141,255,0.12);

  /* ---- functional ---- */
  --warn:#e8a23a;
  --danger:#f0708a;
  --success:#6fd88f;

  /* ---- typography ---- */
  --font-display:"Space Grotesk", "IBM Plex Sans", system-ui, sans-serif;
  --font-body:"IBM Plex Sans", system-ui, sans-serif;
  --font-mono:"IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* fluid type scale */
  --fs-display: clamp(2.75rem, 3.2vw + 2rem, 6.4rem);
  --fs-h1: clamp(2.25rem, 2vw + 1.6rem, 3.6rem);
  --fs-h2: clamp(1.7rem, 1.2vw + 1.3rem, 2.5rem);
  --fs-h3: clamp(1.25rem, 0.5vw + 1.1rem, 1.6rem);
  --fs-lead: clamp(1.05rem, 0.3vw + 1rem, 1.25rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-micro: 0.75rem;

  /* ---- spacing (8px base) ---- */
  --sp-1: 0.5rem;
  --sp-2: 0.75rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 7rem;
  --sp-9: 10rem;

  /* ---- layout ---- */
  --container-max: 1320px;
  --edge: clamp(20px, 4.5vw, 64px);
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: .25s;
  --dur-med: .5s;
  --dur-slow: .9s;
}