/*
 * Falcon Airspace design tokens.
 * Taken from the game's own menus (UI/MenuScreens) so the site and the game read as one product.
 * Single dark theme on purpose: the game is always dark, and the site is its cockpit.
 */
@font-face { font-family: "Barlow"; font-weight: 400; font-display: swap; src: url("../fonts/barlow-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }

:root {
  color-scheme: dark;

  /* Layout concept: a cockpit — full-bleed footage, readouts pinned to the edges, content on a left-weighted 12-column grid. */

  /* colour — ground and surfaces */
  --fa-ground:   #0B0E13;   /* the menus' base */
  --fa-deep:     #07090D;   /* video letterbox, footer */
  --fa-panel:    #12161D;   /* panels, rows */
  --fa-panel-2:  #181D26;   /* raised panel, hover */
  --fa-line:     rgba(242, 238, 230, 0.12);
  --fa-line-2:   rgba(242, 238, 230, 0.24);

  /* colour — ink */
  --fa-ink:      #F2EEE6;
  --fa-muted:    #B5B0A6;
  --fa-faint:    #8E897F;

  /* colour — signal */
  --fa-gold:     #E2BC62;   /* selection, primary action, kickers */
  --fa-gold-ink: #12100B;   /* text on gold */
  --fa-ring:     #49D3EA;   /* the active race ring (cyan in the game); used once per screen at most */
  --fa-sky:      #6FB6D9;   /* missions, educational edition */
  --fa-good:     #7FC27A;   /* ready, A button */
  --fa-bad:      #D0604F;   /* B button, quit */

  /* type */
  --fa-display:  "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --fa-body:     "Barlow", "Segoe UI", system-ui, sans-serif;

  /* type scale (fluid, 400px → 1440px) */
  --fa-t-hero:   clamp(2.6rem, 1.2rem + 5.6vw, 6.4rem);
  --fa-t-h2:     clamp(2rem, 1.3rem + 2.8vw, 3.9rem);
  --fa-t-h3:     clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem);
  --fa-t-lede:   clamp(1.08rem, 1rem + 0.35vw, 1.3rem);
  --fa-t-body:   1rem;
  --fa-t-small:  0.875rem;
  --fa-t-kicker: 0.8125rem;

  /* space (8-pt) */
  --fa-s1: 0.25rem; --fa-s2: 0.5rem; --fa-s3: 0.75rem; --fa-s4: 1rem;
  --fa-s5: 1.5rem;  --fa-s6: 2rem;   --fa-s7: 3rem;    --fa-s8: 4.5rem; --fa-s9: 7rem;

  /* shape */
  --fa-r1: 3px;   /* chips, pips, buttons */
  --fa-r2: 6px;   /* panels, media */
  --fa-wrap: 1320px;

  /* motion */
  --fa-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --fa-fast: 160ms;
  --fa-mid:  420ms;
}