/* ==========================================================================
   FORCES GROUP — DESIGN SYSTEM TOKENS
   Single source of truth. Every value in main.css references a token here.
   ========================================================================== */

:root {

  /* --- COLOR: base surfaces ------------------------------------------- */
  --c-void:        #07080A;   /* deepest, vignettes and overlays          */
  --c-bg:          #08090B;   /* page background                          */
  --c-surface:     #111214;   /* cards, header, panels                    */
  --c-surface-2:   #16181B;   /* raised card / hover                      */
  --c-surface-tint:#1B0A10;   /* maroon-tinted panel (Forces AI block)    */

  /* --- COLOR: brand ---------------------------------------------------- */
  --c-crimson:     #A80F3B;   /* primary action                           */
  --c-crimson-700: #8A0C30;   /* pressed                                  */
  --c-crimson-400: #C8154A;   /* hover / bright accent text               */
  --c-gold:        #C5974A;   /* secondary accent, indices, eyebrows      */
  --c-gold-400:    #DBB93D;   /* gold highlight                           */

  /* --- COLOR: text ------------------------------------------------------ */
  --c-text:        #FFFFFF;
  --c-text-muted:  #B6ADA6;
  --c-text-dim:    #7C7772;
  --c-text-on-brand:#FFFFFF;

  /* --- COLOR: lines & overlays ------------------------------------------ */
  --c-line:        rgba(255, 255, 255, .08);
  --c-line-strong: rgba(255, 255, 255, .18);
  --c-line-gold:   rgba(197, 151, 74, .55);
  --c-line-crimson:rgba(168, 15, 59, .55);
  --c-scrim:       rgba(7, 8, 10, .82);
  --c-scrim-soft:  rgba(7, 8, 10, .55);
  --c-scrim-flat:  rgba(7, 8, 10, .42);

  /* Photography is graded down to sit under white display type. */
  --photo-grade:   saturate(.68) contrast(1.06) brightness(.68);

  /* --- TYPOGRAPHY: families --------------------------------------------- */
  /* Swap the first entry when the brand font files arrive — nothing else
     in the codebase needs to change. */
  --ff-display: "Unbounded", "e-Ukraine Head", "Arial Black", system-ui, sans-serif;
  --ff-body:    "Inter", "e-Ukraine", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* --- TYPOGRAPHY: fluid scale (min @360px → max @1440px) --------------- */
  --fs-eyebrow: clamp(.688rem, .62rem + .28vw,  .813rem);
  --fs-micro:   clamp(.688rem, .65rem + .16vw,  .75rem);
  --fs-sm:      clamp(.813rem, .78rem + .16vw,  .875rem);
  --fs-body:    clamp(.938rem, .90rem + .19vw,  1.063rem);
  --fs-lead:    clamp(1rem,    .94rem + .28vw,  1.188rem);
  --fs-h3:      clamp(1.125rem, 1.02rem + .47vw, 1.5rem);
  --fs-h2:      clamp(1.75rem, 1.24rem + 2.27vw, 3.5rem);
  --fs-h1:      clamp(2.5rem,  1.28rem + 5.45vw, 6.5rem);
  --fs-display: clamp(3rem,    .55rem + 10.9vw, 9rem);

  --lh-tight:   0.92;
  --lh-heading: 1.06;
  --lh-snug:    1.35;
  --lh-body:    1.65;

  --ls-display: -0.02em;
  --ls-heading: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-button:  0.08em;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-black:   800;

  /* --- SPACE: 4px base -------------------------------------------------- */
  --s-1:  .25rem;  --s-2:  .5rem;   --s-3:  .75rem;  --s-4:  1rem;
  --s-5:  1.25rem; --s-6:  1.5rem;  --s-8:  2rem;    --s-10: 2.5rem;
  --s-12: 3rem;    --s-16: 4rem;    --s-20: 5rem;    --s-24: 6rem;

  /* --- LAYOUT ------------------------------------------------------------ */
  --wrap:        1360px;
  --wrap-narrow: 1040px;
  --gutter:      clamp(1rem, .35rem + 2.9vw, 2.75rem);
  --header-h:    76px;

  /* --- RADIUS ------------------------------------------------------------ */
  --r-none: 0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-pill: 999px;

  /* --- ELEVATION --------------------------------------------------------- */
  --sh-card:  0 1px 0 rgba(255,255,255,.04) inset, 0 18px 40px -24px rgba(0,0,0,.9);
  --sh-brand: 0 12px 32px -12px rgba(168, 15, 59, .55);

  /* --- MOTION ------------------------------------------------------------ */
  --t-fast:  120ms cubic-bezier(.4, 0, .2, 1);
  --t-base:  240ms cubic-bezier(.4, 0, .2, 1);
  --t-slow:  520ms cubic-bezier(.22, .61, .36, 1);

  /* --- Z-INDEX ----------------------------------------------------------- */
  --z-base: 1; --z-rail: 40; --z-header: 60; --z-menu: 80;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }
}