/* Spartan Cipher design tokens. Single source of truth for the design system.
   Restores the brand's real three-color language: cyan plus teal plus violet on
   deep navy, with gradient headline text. Violet (#8B5CF6) is used for fills,
   glows, and borders only. Any violet that renders as text uses the lighter
   --violet2 (#A78BFA), which passes WCAG AA. */

:root {
  /* Font stacks. JetBrains Mono is scoped to numerals, grade letters, and
     severity tags only. It never carries body or label text. */
  --font-display: "Space Grotesk", "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type scale (capped so the hero fits the fold) */
  --text-display: clamp(2.5rem, 5.5vw + 0.5rem, 5rem);
  --text-h1: clamp(2rem, 3.5vw + 0.75rem, 3.5rem);
  --text-h2: clamp(1.625rem, 2.6vw + 0.5rem, 2.625rem);
  --text-h3: clamp(1.2rem, 1.4vw + 0.5rem, 1.5rem);
  --text-body-lg: clamp(1.05rem, 0.8vw + 0.5rem, 1.25rem);
  --text-body: clamp(1rem, 0.4vw + 0.8rem, 1.0625rem);
  --text-body-sm: 0.9375rem;
  --text-label: 0.8125rem;
  --text-overline: 0.75rem;

  /* Brand palette (read from the live site) */
  --navy: #0A1628;      /* page background */
  --navy-mid: #0D1F38;
  --navy2: #0F2038;     /* card surface */
  --navy3: #16304F;     /* elevated, hover */

  --cyan: #36E2FF;
  --teal: #00E5CC;
  --teal2: #00C2AE;
  --violet: #8B5CF6;    /* FILLS, GLOWS, BORDERS ONLY */
  --violet2: #A78BFA;   /* the only violet allowed as text */

  --grad: linear-gradient(120deg, #36E2FF 0%, #00E5CC 42%, #8B5CF6 100%);
  --grad-text: linear-gradient(120deg, #36E2FF 0%, #00E5CC 45%, #A78BFA 100%); /* text gradient ends at violet2 */
  --grad-soft: linear-gradient(120deg, rgba(54,226,255,.16), rgba(0,229,204,.10), rgba(139,92,246,.16));
  --teal-glow: rgba(0,229,204,.13);

  --ink: #F4F8FF;
  --muted: #9aa7bd;
  --muted2: #c7d2e0;

  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.14);

  --red: #F87171;
  --amber: #FACC15;

  /* Derived borders and glows (kept here so styles.css never hardcodes them) */
  --teal-border: rgba(0,229,204,.40);
  --teal-glow-strong: rgba(0,229,204,.30);
  --violet-border: rgba(139,92,246,.38);
  --violet-glow: rgba(139,92,246,.22);

  /* Spacing */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px; --space-11: 160px; --space-12: 200px;

  /* Radii */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;

  /* Easing + durations (faster reveals per the correction pass) */
  --ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-dramatic: cubic-bezier(0.76, 0, 0.24, 1);
  --dur-micro: 150ms; --dur-sm: 250ms; --dur-md: 400ms; --dur-lg: 600ms;

  /* Layout */
  --maxw: 1180px;
  --maxw-narrow: 720px;
}