/* ==========================================================================
   MSQX DESIGN TOKENS
   Deep-tech enterprise system. Derived from the MSQX mark: near-black ground,
   cyan / violet duality (post-quantum ↔ distributed coordination), and a
   triangular lattice motif echoing the sacred-geometry field in the logo.
   ========================================================================== */

:root {
  /* ---- Surface ---- */
  --c-bg: #06080c;
  --c-bg-alt: #0a0e15;
  --c-surface: #0d121b;
  --c-surface-2: #121926;
  --c-surface-raised: #161f2d;
  --c-border: #1d2733;
  --c-border-strong: #2b3a4a;
  --c-border-hairline: #161e29;

  /* ---- Text ---- */
  --c-text: #eef2f7;
  --c-text-dim: #a7b3c4;
  --c-text-faint: #67748a;

  /* ---- Brand accent: cyan (PQC / proven, available) ---- */
  --c-accent: #2ad6e8;
  --c-accent-dim: #17939f;
  --c-accent-soft: rgba(42, 214, 232, 0.1);
  --c-accent-border: rgba(42, 214, 232, 0.32);

  /* ---- Brand accent: violet (PhaseLock / coordination, research) ---- */
  --c-violet: #8b7ff5;
  --c-violet-dim: #5e54ad;
  --c-violet-soft: rgba(139, 127, 245, 0.1);
  --c-violet-border: rgba(139, 127, 245, 0.32);

  /* ---- Status: research / validation ---- */
  --c-amber: #dba14a;
  --c-amber-soft: rgba(219, 161, 74, 0.1);
  --c-amber-border: rgba(219, 161, 74, 0.32);

  /* ---- Type ---- */
  --f-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --f-body: "Inter", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;

  /* ---- Scale ---- */
  --fs-eyebrow: 0.72rem;
  --fs-body: 1rem;
  --fs-body-lg: 1.125rem;
  --fs-h4: 1.25rem;
  --fs-h3: clamp(1.5rem, 1.3rem + 1vw, 2rem);
  --fs-h2: clamp(1.9rem, 1.6rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.4rem, 1.9rem + 2.8vw, 4.1rem);

  /* ---- Layout ---- */
  --container: 1240px;
  --container-narrow: 820px;
  --gutter: 24px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --section-pad: clamp(64px, 5vw + 40px, 128px);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 220ms;
}

@media (min-width: 900px) {
  :root { --gutter: 40px; }
}