/* Design tokens -- loaded FIRST (see global/_head.twig). Nothing else should declare
   :root custom properties; add new tokens here. */

:root {
  /* Colors - Base */
  --dark-bg: #1a1a1a;
  --black-bg: black !important;
  --text-light-gray: #cccccc;
  --brand-dark-red: #e50000;

  /* Colors - Cyan (design system --cyan-* scale; the brand accent) */
  --cyan-50: #d6f3fb;
  --cyan-100: #bbebf8;
  --cyan-200: #99e2f4;
  --cyan-300: #76d8f0;
  --cyan-400: #54ceed;
  --cyan-500: #32c4e9;
  --cyan-500-rgb: 50, 196, 233; /* == --cyan-500, as a triplet for rgba(var(--cyan-500-rgb), alpha) */
  --cyan-600: #2aa3c2;
  --cyan-700: #21839b;
  --cyan-800: #196275;
  --cyan-900: #11414e;
  --cyan-950: #0a272f;
  /* Legacy aliases — prefer --cyan-* above. Kept so existing usages don't break. */
  --blue-500: var(--cyan-500);
  --blue-600: var(--cyan-600);
  --color-cyan: var(--cyan-500);

  /* Gradients (from the design system; only the one currently used) */
  --gradient-hero: radial-gradient(120% 140% at 15% 10%, var(--navy-brand) 0%, var(--navy-800) 55%, var(--navy-950) 100%); /* center stop matches --navy-brand, not --navy-500, so it doesn't seam against flat-navy sections */

  /* Colors - Red */
  --red-500: #b5231d;
  --red-700: #791713;
  --color-red-400: #C14843;
  --color-red-500: #B5231D;
  --color-red-600: #971D18;
  --color-red-700: #791713;
  /* --color-red-500 measures ~2.2-3.15:1 against the dark navy backgrounds it's used on in
     the agents-fleet hero/checklist -- below WCAG AA's 3:1 minimum for large/bold text. This
     is a calculated placeholder (~10% lighter than --color-red-400, same hue) that clears 3:1
     with margin (~3.7:1) against the lightest case; swap for an official brand shade if design
     provides one. */
  --color-red-on-dark: #CE5F5A;

  /* Colors - Navy/Dark */
  --navy-brand: #192134; /* Pantone 7547 C — the brand navy (design system's --sprk-navy); used as a raw #192134 literal in many places */
  --navy-brand-rgb: 25, 33, 52; /* == --navy-brand, as a triplet for rgba(var(--navy-brand-rgb), alpha) */
  --navy-100: #c3cce5; /* light navy tint — body text on dark surfaces */
  --navy-500: #111827;
  --navy-700: #0b111d; /* was #23252B, a drifted warm-gray */
  --navy-800: #070b15;
  --navy-950: #020408;
  --navy-mid: #28395C;
  --color-dark-blue: #111827;
  --color-blue-gray: #343741;

  /* Colors - Slate scale (design system neutral/UI grays) */
  --slate-100: #edeef0;
  --slate-200: #c9ccd4; /* == --border-subtle in the design system */
  --slate-400: #888ea1;
  --slate-500: #6a6f81;
  --slate-700: #343741; /* "Sprocket gray" — logotype/body-on-light color */

  /* Colors - Gray/Neutrals */
  --gray-50: #D6D7D9;
  --gray-900: #0f0f10;
  --gray-alt: #55565B;
  --off-white: #F0EFEF;
  --navy-gray: #243543;
  --color-gray-10: #D6D7D9;
  --color-gray-30: #999BA0;
  --color-off-white: #F0EFEF;
  --color-white: #FFFFFF;
  --color-black: #000000;

  /* Colors - Text  */
  --text-black: #111216;
  --text-dark-gray: #383838;
  --color-text-primary: #111216;

  /* Design-system semantic aliases */
  --action-primary: var(--color-red-500);
  --action-primary-hover: var(--color-red-600);
  --accent: var(--cyan-500);
  --accent-hover: var(--cyan-600);
  --border-inverse: rgba(255, 255, 255, 0.12); /* hairline border on dark surfaces */

  /* Typography */
  --font-family-primary: 'Subito', sans-serif;
  --font-family-mono: 'Geist Mono', monospace;

  /* Font Sizes */
  --font-size-xsm: 0.8125rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xlg: 1.375rem;
  --font-size-xl: 2rem;
  --font-size-2xl: 2.5rem;
  --font-size-3xl: 58px;

  /* Line Heights */
  --line-height-sm: 1.25;
  --line-height-md: 1.375;
  --line-height-lg: 1.5;
  --line-height-tight: 1.1;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.6;

  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;
  --spacing-2xl: 5rem;

  /* Layout */
  --container-max-width: 1600px;
  --container-padding-desktop: 5%;
  --container-padding-mobile: 20px;

  /* Radius */
  --radius-md: 6px; /* crisp, low-radius brand corners */

  /* Shadows (only the two brand-color glows + neutral mid shadow ported so far) */
  --shadow-md: 0 4px 12px rgba(var(--bs-black-rgb), 0.10), 0 2px 4px rgba(var(--bs-black-rgb), 0.06);
  --shadow-glow-cyan: 0 0 0 1px rgba(var(--cyan-500-rgb), 0.30), 0 8px 28px rgba(var(--cyan-500-rgb), 0.22);
  --shadow-glow-red: 0 8px 28px rgba(181, 35, 29, 0.28);

  /* Z-index */
  --z-index-background: -1;
  --z-index-default: 0;
  --z-index-content: 1;
  --z-index-decorative: 5;
  --z-index-overlay: 10;

  /* Transitions */
  --transition-base: all 0.3s ease;

  /* Borders */
  --border-top: 1px solid var(--color-gray-10);
}