/* ==========================================================================
   STEAMinverse — Design Tokens
   Cosmic / cyber-tech palette fixed by brief; layout & type choices are ours.
   ========================================================================== */

:root {
  /* --- Color: base palette (brief-specified) --- */
  --void: #0B0C10;         /* page background, deep space */
  --panel: #1F2833;        /* surface / card background */
  --panel-raised: #26313d; /* slightly lighter surface */
  --cyan: #66FCF1;         /* electric accent — circuits, function */
  --magenta: #9D4EDD;      /* creative accent — the "A" in STEAM */
  --teal-deep: #2E6E82;    /* steel-blue — the logo's darker gradient end */
  --mist: #C5C6C7;         /* body text on dark */
  --white: #F5F7FA;        /* headings / high-contrast text */

  /* --- Derived / functional colors --- */
  --cyan-dim: rgba(102, 252, 241, 0.14);
  --magenta-dim: rgba(157, 78, 221, 0.16);
  --hairline: rgba(197, 198, 199, 0.14);
  --hairline-strong: rgba(197, 198, 199, 0.24);
  --shadow-glow-cyan: 0 0 24px rgba(102, 252, 241, 0.25);
  --shadow-glow-magenta: 0 0 24px rgba(157, 78, 221, 0.3);

  /* --- Type --- */
  --font-display: "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "Sora", "Segoe UI", sans-serif;

  --fs-2xs: 0.75rem;
  --fs-xs: 0.85rem;
  --fs-sm: 0.95rem;
  --fs-base: 1rem;
  --fs-md: 1.15rem;
  --fs-lg: 1.4rem;
  --fs-xl: 1.9rem;
  --fs-2xl: 2.6rem;
  --fs-3xl: 3.6rem;

  /* --- Layout --- */
  --content-width: 1180px;
  --content-pad: clamp(1.25rem, 4vw, 3rem);
  --radius-sm: 6px;
  --radius-md: 12px;
  --header-h: 76px;

  /* --- Motion --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 180ms;
  --dur-mid: 420ms;
  --dur-slow: 900ms;
}