/* =========================================================================
   DUAL · design tokens
   Colors are derived from the DUAL logo (signal-blue arc + saturated red).
   Spend boldness in one place: the signal-wave motif. Keep the rest quiet.
   ========================================================================= */

:root {
  /* Brand */
  --red-600: #E30613;       /* primary CTA — refined logo red */
  --red-500: #FF0009;       /* raw logo red — accents, focus */
  --blue-900: #2A2C6B;      /* deepest indigo */
  --blue-700: #3E4095;      /* primary brand blue (logo indigo) */
  --blue-400: #7F9ED1;      /* mid signal blue */
  --blue-200: #BBC9E7;      /* light signal blue */

  /* Neutrals — light, clarity-first */
  --ink-900: #0E1020;
  --ink-700: #1F2240;
  --ink-600: #454861;
  --ink-400: #8389A6;
  --line: #E3E7F2;
  --bg: #FFFFFF;
  --bg-tint: #F5F7FB;

  /* Signature gradient — the "signal" */
  --signal: linear-gradient(120deg, var(--blue-700), var(--blue-400), var(--blue-200));
  --signal-soft: linear-gradient(120deg, rgba(62,64,149,0.08), rgba(127,158,209,0.06), rgba(187,201,231,0.04));

  /* Type families */
  --ff-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --ff-body: "Inter", ui-sans-serif, system-ui, sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale (mobile → desktop) */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem);
  --fs-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-3xl: clamp(2rem, 1.5rem + 2vw, 3rem);
  --fs-4xl: clamp(2.5rem, 1.8rem + 3vw, 4rem);
  --fs-5xl: clamp(3rem, 2rem + 5vw, 6rem);

  /* Spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 2.5rem;
  --s-8: 3rem;
  --s-9: 4rem;
  --s-10: 5rem;
  --s-11: 6rem;
  --s-12: 8rem;

  /* Radius — small, consistent. Precision hardware. */
  --r-1: 4px;
  --r-2: 6px;
  --r-3: 8px;
  --r-4: 10px;
  --r-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
  --t-fast: 180ms;
  --t-med: 320ms;
  --t-slow: 560ms;

  /* Shadows — engineered, not soft-consumer */
  --shadow-1: 0 1px 0 rgba(14, 16, 32, 0.04), 0 1px 2px rgba(14, 16, 32, 0.04);
  --shadow-2: 0 4px 24px -8px rgba(14, 16, 32, 0.10);
  --shadow-3: 0 12px 40px -12px rgba(14, 16, 32, 0.18);
  --shadow-nav: 0 1px 0 var(--line), 0 12px 24px -16px rgba(14, 16, 32, 0.08);

  /* Layout */
  --container: 1280px;
  --container-narrow: 1080px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

  /* Mobile viewport unit (set by JS) */
  --vh: 1vh;

  /* Nav heights */
  --nav-h: 72px;
  --nav-h-compact: 60px;
}

/* Optional dark-mode hook — left untriggered in Phase 1 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Kept identical for now: the site is intentionally light. */
  }
}