/* ──────────────────────────────────────────────────────────────
   Design tokens — Direction A (Bold tech)
   Source of truth: 02-website-copy-and-design-brief.md § Design system
   ────────────────────────────────────────────────────────────── */

:root {
  /* Color palette */
  --tcs-bg:        #0A1330;  /* page background (deep navy) */
  --tcs-panel:     #121C42;  /* cards, stat strip, scorecard */
  --tcs-border:    #24346B;  /* 1px panel + card borders */
  --tcs-primary:   #2F5BFF;  /* buttons, links, progress bars */
  --tcs-accent:    #36C2F0;  /* eyebrow labels, highlighted words, badges */
  --tcs-text:      #EEF2FF;  /* headings + main text */
  --tcs-muted:     #A7B3D6;  /* body copy + descriptions */

  /* Semantic aliases (keep call-sites readable) */
  --tcs-link:              var(--tcs-primary);
  --tcs-link-hover:        #4A72FF;
  --tcs-btn-primary-bg:    var(--tcs-primary);
  --tcs-btn-primary-hover: #4A72FF;
  --tcs-btn-secondary-border: #3A4A85;

  /* Typography */
  --tcs-font-heading: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tcs-font-body:    "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --tcs-h1-size-desktop:   76px;
  --tcs-h1-size-mobile:    40px;
  --tcs-h2-size-desktop:   44px;
  --tcs-h2-size-mobile:    30px;
  --tcs-h3-size-desktop:   20px;
  --tcs-h3-size-mobile:    18px;
  --tcs-body-size-desktop: 18px;
  --tcs-body-size-mobile:  16px;
  --tcs-eyebrow-size-desktop: 14px;
  --tcs-eyebrow-size-mobile:  12px;

  --tcs-h1-leading: 1.05;
  --tcs-h2-leading: 1.15;
  --tcs-h3-leading: 1.3;
  --tcs-body-leading: 1.6;

  /* Spacing scale */
  --tcs-space-1: 4px;
  --tcs-space-2: 8px;
  --tcs-space-3: 12px;
  --tcs-space-4: 16px;
  --tcs-space-5: 24px;
  --tcs-space-6: 32px;
  --tcs-space-7: 48px;
  --tcs-space-8: 64px;
  --tcs-space-9: 96px;

  /* Section rhythm per brief */
  --tcs-section-gap-desktop: 96px;
  --tcs-section-gap-mobile:  64px;

  /* Layout */
  --tcs-container-max: 1240px;
  --tcs-container-pad: 24px;

  /* Radii */
  --tcs-radius-sm:   8px;
  --tcs-radius-md:  12px;
  --tcs-radius-lg:  16px;
  --tcs-radius-xl:  20px;

  /* Shadows (sparing — this is a flat, product-led design) */
  --tcs-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --tcs-shadow-md: 0 8px 24px rgba(0,0,0,0.3);

  /* Motion */
  --tcs-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --tcs-dur-fast: 120ms;
  --tcs-dur:      200ms;
}