/* =========================================================
   TELOS — shared design system (single source of truth)
   Tokens + animation library. Linked FIRST on every page,
   before each page's own component styles. Change a token or
   a keyframe here and it updates across the whole site.
   ========================================================= */

:root {
  /* Surfaces & text */
  --canvas: #F7F8FA;          /* page background */
  --surface: #FFFFFF;         /* cards / video frame */
  --surface-subtle: #EEF1F6;
  --ink: #0B0E14;             /* primary text */
  --ink-secondary: #424A57;   /* subhead / secondary */
  --ink-muted: #6B7280;       /* small meta */
  --ink-faint: #9AA3B0;       /* disabled / decorative */

  /* Brand accent: bright blue */
  --blue-700: #1D4ED8;        /* CTA hover/active, link hover */
  --blue-600: #2563EB;        /* PRIMARY accent: CTA fill, links, emphasis, eyebrow, focus */
  --blue-100: #DCE7FD;        /* tint / badge fills */
  --blue-50: #EEF3FE;

  /* Deep navys (dark sections) */
  --navy-900: #0A1B3D;
  --navy-800: #0F2650;

  --hairline: #E2E6EC;

  /* Feedback */
  --danger: #B42318;          /* form errors (was apply-only) */

  /* Typography */
  --font-display: 'Geist', system-ui, sans-serif;        /* headlines */
  --font-ui: 'Hanken Grotesk', system-ui, sans-serif;    /* subhead, buttons, nav */
  --font-body: 'Inter', system-ui, sans-serif;           /* body */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;/* eyebrow, labels */
  --font-logo: 'Space Grotesk', system-ui, sans-serif;   /* wordmark (was brand-only) */

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

  /* Spacing scale (8pt base) */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(10, 27, 61, .05), 0 1px 1px rgba(10, 27, 61, .04);
  --shadow-md: 0 4px 12px rgba(10, 27, 61, .07), 0 2px 4px rgba(10, 27, 61, .05);
  --shadow-lg: 0 16px 40px rgba(10, 27, 61, .10), 0 4px 10px rgba(10, 27, 61, .06);

  /* Motion & layout */
  --ease: cubic-bezier(.2, .6, .2, 1);
  --t-fast: 150ms; --t-base: 250ms; --t-slow: 400ms;
  --container: 1160px;

  /* Alias: pricing.html referenced var(--muted) which was never defined */
  --muted: #6B7280;
}

/* =========================================================
   ANIMATION LIBRARY  (one home for every keyframe)
   fade-up / stepin = the shared reveal (near-identical);
   pulse-ring = live/scarcity dot; logo-marquee = logo strip.
   ========================================================= */
@keyframes fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes stepin  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes pulse-ring { 0% { transform: scale(1); opacity: .45; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes logo-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}