/* ============================================================
   Fly GACA — Design Tokens
   The Falcon palette and scales, per the Brand Identity Sheet
   (Mark v2 — Falcon over Kingdom). Dark-first.
   Shared by every page; never hard-code a colour outside this file.
   ============================================================ */

:root {
  /* --- The Falcon palette (sampled from the mark) --- */
  --falcon-night:  #0A0E12;   /* primary canvas — the deck the falcon rests on */
  --falcon-deep:   #0F1A24;   /* elevated card on dark */
  --falcon-mist:   #1A2A38;   /* dividers, subtle borders */
  --falcon-teal:   #2D6E8A;   /* primary brand — buttons, fills */
  --teal-bright:   #4A9CB8;   /* hover, links on dark, focus rings */
  --falcon-sage:   #8FC9A8;   /* secondary accent, success */
  --sage-bright:   #B5DDC2;   /* highlight, focus ring */
  --falcon-gold:   #C8A04A;   /* heritage accent — used sparingly */
  --ivory:         #F5F2ED;   /* light reading surface */

  /* --- Semantic surfaces --- */
  --bg:            var(--falcon-night);
  --surface:       var(--falcon-deep);
  --surface-raised:#13212E;   /* hover / raised card */
  --border:        var(--falcon-mist);
  --border-bright: #26384A;

  /* --- Text on dark --- */
  --text:          #E8EDF2;   /* primary */
  --text-muted:    #9DA9B4;   /* secondary */
  --text-dim:      #8A95A1;   /* tertiary, captions — WCAG AA (≈6:1 on --bg) */
  --text-on-brand: #FFFFFF;   /* text on a teal fill */

  /* --- Brand roles --- */
  --brand:         var(--falcon-teal);
  --brand-hover:   var(--teal-bright);
  --link:          var(--teal-bright);   /* teal is too low-contrast as text on night */
  --accent:        var(--falcon-sage);
  --accent-bright: var(--sage-bright);
  --gold:          var(--falcon-gold);
  --success:       var(--falcon-sage);
  --focus:         var(--sage-bright);

  /* --- The brand gradient: teal -> sage (wordmark GACA, hairlines) --- */
  --grad-brand:    linear-gradient(102deg, var(--falcon-teal) 0%, var(--falcon-sage) 100%);
  --grad-wing:     linear-gradient(155deg, var(--teal-bright) 0%, var(--falcon-sage) 100%);

  /* --- Glow tokens (the only glows allowed on the mark / hero) --- */
  --glow-teal:     radial-gradient(closest-side, rgba(45,110,138,0.55), rgba(45,110,138,0) 70%);
  --glow-sage:     radial-gradient(closest-side, rgba(143,201,168,0.40), rgba(143,201,168,0) 70%);

  /* --- Typography --- */
  --font-sans: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* Fluid type scale */
  --fs-display: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem);
  --fs-h1:      clamp(2rem, 1.5rem + 2.1vw, 3rem);
  --fs-h2:      clamp(1.55rem, 1.3rem + 1.1vw, 2.15rem);
  --fs-h3:      1.3rem;
  --fs-lg:      1.15rem;
  --fs-base:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.78rem;   /* eyebrows / mono labels */

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

  --lh-tight:   1.15;
  --lh-snug:    1.35;
  --lh-body:    1.65;

  /* --- Spacing (4px base) --- */
  --space-1: 0.25rem;  --space-2: 0.5rem;   --space-3: 0.75rem;
  --space-4: 1rem;     --space-5: 1.5rem;   --space-6: 2rem;
  --space-8: 3rem;     --space-10: 4rem;    --space-12: 6rem;
  --space-16: 8rem;

  /* --- Radii (brand tile radius = 0.22 x side) --- */
  --radius-sm:   8px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* --- Elevation --- */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.40);
  --shadow-card: 0 8px 28px rgba(0,0,0,0.45);
  --shadow-pop:  0 18px 50px rgba(0,0,0,0.55);

  /* --- Layout --- */
  --container:        1180px;
  --container-narrow: 760px;
  --nav-h:            68px;

  /* --- Motion --- */
  --ease:  cubic-bezier(0.4, 0, 0.2, 1);
  --dur:   0.2s;
  --dur-slow: 0.4s;
}