/* Go X OpsGym — design tokens
   Midas system: near-black bands, warm off-white ink, gold accent, editorial + technical. */

:root {
  /* Background bands (cool, near-black, subtly shifting) */
  --bg:        #0A0A0B;
  --bg-2:      #0F0F13;
  --bg-3:      #141419;
  --bg-band:   #0D0D10;
  --bg-fade:   #050506;

  /* Surfaces */
  --surface:   #131318;
  --surface-2: #191921;
  --surface-3: #22222A;

  /* Borders (hairlines, all alpha-white) */
  --border:         rgba(255, 255, 255, 0.08);
  --border-2:       rgba(255, 255, 255, 0.14);
  --border-3:       rgba(255, 255, 255, 0.22);
  --border-gold:    rgba(245, 196, 67, 0.28);
  --border-gold-hi: rgba(245, 196, 67, 0.42);

  /* Text (warm off-white, not pure white) */
  --text:      #F5F5F0;
  --text-2:    #B8B8B0;
  --text-3:    #7A7A75;
  --text-faint:#4A4A47;

  /* Accent — Gold (the "Midas touch") */
  --gold:      #F5C443;
  --gold-2:    #F5D060;
  --gold-dim:  rgba(245, 196, 67, 0.28);
  --gold-glow: rgba(245, 196, 67, 0.10);
  --gold-line: rgba(245, 196, 67, 0.55);
  --gold-on:   #000;

  /* Semantic accents (data cards only) */
  --green:     #22C55E;
  --green-soft: rgba(34, 197, 94, 0.15);
  --green-line: rgba(34, 197, 94, 0.32);
  --violet:    #A78BFA;
  --violet-soft: rgba(167, 139, 250, 0.15);
  --violet-line: rgba(167, 139, 250, 0.32);
  --red:       #F5675A;
  --red-soft:  rgba(245, 103, 90, 0.15);
  --red-line:  rgba(245, 103, 90, 0.32);
  --red-deep:  #7A2632;
  --blue:      #4A9EFF;

  /* Type */
  --font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-hero:    clamp(56px, 9vw, 132px);
  --fs-h1:      clamp(40px, 5vw, 88px);
  --fs-h2:      clamp(28px, 3.2vw, 48px);
  --fs-h3:      clamp(20px, 1.6vw, 28px);
  --fs-lede:    clamp(18px, 1.7vw, 26px);
  --fs-body:    16px;
  --fs-sm:      14px;
  --fs-xs:      12px;
  --fs-eyebrow: 11px;

  /* Space */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
  --sp-9: 96px; --sp-10: 128px; --sp-11: 160px;

  /* Radii — Midas favors 16px on cards, 999px on pills */
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-lg: 16px; --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --ease-in-out: cubic-bezier(.4, 0, .2, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 360ms; --dur-4: 600ms;

  /* Backward-compat aliases (so old selectors keep working while we sweep) */
  --bg-elev:       var(--bg-2);
  --border-strong: var(--border-2);
  --text-mid:      var(--text-2);
  --text-mut:      var(--text-3);
  --accent:        var(--gold);
  --accent-soft:   var(--gold-glow);
  --accent-line:   var(--gold-line);
  --accent-hi:     var(--gold-2);
  --coral:         var(--red);
  --coral-soft:    var(--red-soft);
  --amber:         var(--gold);
  --amber-soft:    var(--gold-glow);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}