/* ──────────────────────────────────────────────────────────────
   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:           #16244F;  /* cards, stat strip, scorecard (A2: lifted +4 pts) */
  --tcs-panel-elevated:  #1D2D63;  /* scorecard, hero cards that should feel higher */
  --tcs-border:          #2A3B7A;  /* 1px panel + card borders (A2: lifted to stay visible against new panel) */
  --tcs-border-strong:   #3C4F99;  /* hover-state border */
  --tcs-primary:         #2F5BFF;  /* buttons, links, progress bars */
  --tcs-accent:          #36C2F0;  /* eyebrow labels, small accents, FAQ marker, problem titles */
  --tcs-secondary:       #8B5CF6;  /* loud brand accent: hero highlight word only ("not 15.", "shipped.") */
  --tcs-secondary-tint:  rgba(139, 92, 246, 0.14);
  --tcs-text:            #EEF2FF;  /* headings + main text */
  --tcs-muted:           #A7B3D6;  /* body copy + descriptions */

  /* ─── Status colors ────────────────────────────────────────────
     Semantic only. Never used as decoration — only to signal state.
     Maps to the hiring product's PROCEED / HOLD / SKIP vocabulary. */
  --tcs-success:         #10B981;  /* emerald — PROCEED, verified, passed, form-success */
  --tcs-success-tint:    rgba(16, 185, 129, 0.14);
  --tcs-warning:         #F59E0B;  /* amber   — HOLD, review needed, in-progress */
  --tcs-warning-tint:    rgba(245, 158, 11, 0.14);
  --tcs-danger:          #EF4444;  /* red     — SKIP, rejected, form-error */
  --tcs-danger-tint:     rgba(239, 68, 68, 0.14);

  /* 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 + glows */
  --tcs-shadow-sm: 0 1px 2px rgba(0,0,0,0.2);
  --tcs-shadow-md: 0 8px 24px rgba(0,0,0,0.3);
  --tcs-glow-primary: 0 12px 32px -10px rgba(47, 91, 255, 0.45);
  --tcs-glow-primary-strong: 0 16px 40px -8px rgba(47, 91, 255, 0.6);
  --tcs-glow-accent:  0 0 32px -4px rgba(54, 194, 240, 0.28);

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