/* ProLine — Gate 1 design tokens
   Single source of truth. Component CSS must reference these, never literals.
   This file is the Gate 4 theme.json source. */

:root {
  /* ---- Colour: dark world -------------------------------------------- */
  --ink-950: #030712;
  --navy-900: #060B14;
  --navy-800: #071426;
  --navy-700: #082D42;

  /* ---- Colour: brand ------------------------------------------------- */
  --blue-600: #0B3B9F;
  --blue-500: #175FEA;
  --cyan-400: #22D5F5;

  /* ---- Colour: light world ------------------------------------------- */
  --white-100: #F7FAFC;
  --white-200: #EDF5FA;
  --white-300: #E8F8FB;

  /* ---- Colour: text -------------------------------------------------- */
  --text-light: #F3F5F7;
  --text-muted: #91A0B5;
  --text-dark: #101A29;
  --text-dim: #5B6A7D;

  /* ---- Colour: line / signal ----------------------------------------- */
  --line-dark: rgb(255 255 255 / 12%);
  --line-light: rgb(10 35 55 / 14%);
  --signal: #FFB65C; /* status only; never competes with cyan */

  /* ---- Surfaces ------------------------------------------------------ */
  --field-dark:
    radial-gradient(circle at 18% 22%, rgb(23 95 234 / 28%), transparent 38%),
    radial-gradient(circle at 82% 28%, rgb(34 213 245 / 18%), transparent 34%),
    linear-gradient(135deg, var(--ink-950) 0%, var(--navy-800) 48%, var(--navy-700) 100%);
  --field-light: linear-gradient(135deg, var(--white-100) 0%, var(--white-200) 58%, var(--white-300) 100%);
  --field-cta:
    radial-gradient(circle at 75% 20%, rgb(34 213 245 / 20%), transparent 38%),
    linear-gradient(125deg, var(--navy-800) 0%, #0B2350 52%, #06445C 100%);
  --cta-fill: linear-gradient(125deg, var(--blue-600) 0%, var(--blue-500) 100%);

  /* ---- Type ---------------------------------------------------------- */
  --font-display: "Space Grotesk", "Space Grotesk Fallback", system-ui, sans-serif;
  --font-body: "Inter", "Inter Fallback", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  /* Deliberately tighter than the suggested scale: the promise is a full
     sentence, not a single word, and must hold a 55–70ch measure. */
  --fs-display: clamp(2.5rem, 4.6vw, 4.25rem);
  --fs-h2: clamp(1.875rem, 3.2vw, 3rem);
  --fs-statement: clamp(1.375rem, 2.4vw, 2.25rem);
  --fs-h3: clamp(1.1875rem, 1.5vw, 1.5rem);
  --fs-lede: clamp(1.0625rem, 1.15vw, 1.1875rem);
  --fs-body: clamp(1rem, 1.05vw, 1.0625rem);
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  --lh-tight: 1.06;
  --lh-snug: 1.22;
  --lh-body: 1.62;
  --tr-label: 0.14em;

  /* ---- Space (8px base) ---------------------------------------------- */
  --s-1: 8px;   --s-2: 16px;  --s-3: 24px;  --s-4: 32px;
  --s-5: 40px;  --s-6: 48px;  --s-8: 64px;  --s-10: 80px;
  --s-12: 96px; --s-16: 128px;
  --gutter: 24px;
  --margin: 60px;
  --measure: 62ch;
  --content-max: 1320px;
  /* Height-aware and deliberately capped: wide displays retain breathing room
     without pushing the section's useful content below the first screen. */
  --section-y: clamp(64px, min(7vw, 10vh), 128px);
  --rhythm-md: clamp(24px, min(4vw, 6vh), 64px);
  --rhythm-lg: clamp(32px, min(5vw, 7vh), 72px);

  /* ---- Shape / depth -------------------------------------------------- */
  --r-aperture: 32px;
  --r-card: 24px;
  --r-control: 14px;
  --r-pill: 999px;
  --depth-1: 0 1px 2px rgb(3 7 18 / 8%), 0 8px 24px rgb(3 7 18 / 6%);
  --depth-2: 0 2px 4px rgb(3 7 18 / 10%), 0 20px 48px rgb(3 7 18 / 10%);
  --depth-glow: 0 0 0 1px rgb(34 213 245 / 22%), 0 12px 40px rgb(11 59 159 / 34%);

  /* ---- Motion --------------------------------------------------------- */
  --e-out: cubic-bezier(.22, .61, .36, 1);
  --e-signal: cubic-bezier(.65, 0, .35, 1);
  --d-1: 180ms;
  --d-2: 320ms;
  --d-3: 640ms;

  /* ---- Layout constants ----------------------------------------------- */
  /* The split must follow the content box, not the viewport. Once the
     container stops filling the width (1536 and up) a viewport percentage
     drifts away from the grid it is supposed to divide. These resolve to the
     approved 748.8px seam at 1440 and stay aligned at every other width. */
  --content-w: min(var(--content-max), 100%);
  --grid-x: calc((100% - var(--content-w)) / 2 + var(--margin));
  --grid-w: calc(var(--content-w) - var(--margin) * 2);
  --seam: calc(var(--grid-x) + var(--grid-w) * 0.524);
  --rail-w: 132px;
  --header-h: 72px;
}

/* Large displays: hold the composition together instead of stranding it in
   the middle of the screen. Text measure stays governed by --measure. */
@media (min-width: 1700px) { :root { --content-max: 1520px; } }
@media (min-width: 2100px) { :root { --content-max: 1760px; } }

@media (max-width: 1280px) { :root { --margin: 40px; } }
@media (max-width: 1024px) { :root { --margin: 32px; } }
@media (max-width: 640px)  { :root { --margin: 20px; --gutter: 16px; --r-aperture: 24px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --d-1: 0ms; --d-2: 0ms; --d-3: 0ms; }
}