/* =====================================================================
   FOURTH QUARTER FORWARD — DESIGN TOKENS
   Canonical source. See ../FQF-ART-DIRECTION.md for the rules behind
   these values.

   Consumed by:  index.html  ·  gear-hub/index.html

   NOT consumed by gear-post.html. That file is deliberately 100%
   self-contained — it base64-embeds its fonts so PNG exports render
   identical faces with no network fetch, which FQF-ART-DIRECTION.md §12
   marks a [RULE]. Its token block mirrors this one by hand. If you change
   a hex here, change it there too; those are the only two places.

   HIERARCHY — the load-bearing rule (art direction §2):
     navy dominant · royal secondary energy · gold accent, NEVER dominant.
   ===================================================================== */

:root{
  /* ---- palette ------------------------------------------------------
     Two names per colour. index.html has always used --blue/--lime;
     gear-post.html and the newer namespaced sections use --navy/--gold.
     Both are kept as aliases of the same hex so neither convention has
     to be rewritten and neither can drift from the other. ------------ */
  --blue:        #0F2E5F;   --navy:        #0F2E5F;   /* PRIMARY (dominant) */
  --blue-deep:   #0A2247;   --navy-deep:   #0A2247;   /* gradient end / hover */
  --blue-ink:    #0A1F45;   --ink-navy:    #0A1F45;   /* deepest navy text */
  --royal:       #2F63FF;                             /* SECONDARY (athletic pop) */
  --lime:        #F3C44B;   --gold:        #F3C44B;   /* ACCENT — never dominant */
  --lime-deep:   #D9A22E;   --gold-deep:   #D9A22E;

  --bg:          #FAFAFA;   --off:         #FAFAFA;   /* off-white page */
  --bg-grey:     #EEF1F6;                             /* faint cool section */
  --card:        #FFFFFF;
  --blue-soft:   #C3D0E8;                             /* light text on navy */
  --muted:       #4B5563;                             /* body text grey on light */
  --ink:         #111111;
  --slate:       #5B6675;
  --line:        #E3E8F0;                             /* hairline on light */

  /* ---- status semantics --------------------------------------------
     Not part of the original brand palette — added for the Gear Hub,
     which has to say "posted" vs "not posted" and "on hand" vs "donated"
     at a glance. Chosen to sit beside navy/gold without fighting them,
     and both clear 4.5:1 on white.

     Colour is never the only signal: every status also carries a label
     and an icon, so these read correctly in greyscale and to a screen
     reader. -------------------------------------------------------- */
  --status-success:      #127A4B;   /* posted · complete */
  --status-success-bg:   #E7F4EC;
  --status-attention:    #C33A31;   /* not yet posted · needs action */
  --status-attention-bg: #FBEAE8;
  --status-neutral:      #4B5563;   /* donated · archived — settled, not alarming */
  --status-neutral-bg:   #EEF1F6;

  /* ---- radii (art direction §7) ------------------------------------ */
  --r-panel: 34px;
  --r-card:  24px;
  --r-img:   22px;
  --r-chip:  16px;
  --r-pill:  999px;

  /* ---- type -------------------------------------------------------- */
  --display: "Anton", "Arial Narrow", sans-serif;
  --body:    "Figtree", system-ui, sans-serif;

  /* Tracking for the display face. Anton is drawn very tight, and at
     headline sizes the counters start to close up — this opens it out.
     Set in em so it scales with the type rather than going slack on
     small headings and tight on large ones.

     [RULE] This is the single source for display tracking. It is applied
     to every Anton setting on the site AND mirrored in the canvas social
     templates (gear-hub/fqf-story.js, DISPLAY_TRACKING), so a headline on
     Instagram matches a headline on the page. Change it in both places. */
  --display-tracking: 0.035em;

  /* The wordmark is set noticeably wider than body headlines. At lockup
     size (~20px) Anton reads as a dense block, and the extra air is what
     makes "FOURTH QUARTER" legible as a name rather than a texture.
     Used by every logo lockup — site header, footer, and both Gear Hub
     lockups — so they stay identical. */
  --lockup-tracking: 0.1em;

  /* ---- elevation ---------------------------------------------------
     Always tinted navy, never neutral black, always with a large
     negative spread so they read as ambient lift rather than a drop
     shadow. ---------------------------------------------------------- */
  --shadow-card: 0 14px 38px -22px rgba(10,31,69,.40);
  --shadow-soft: 0  8px 24px -16px rgba(10,31,69,.32);
  --shadow-lift: 0 22px 50px -26px rgba(10,31,69,.50);
  --ring: 0 0 0 3px rgba(47,99,255,.40);

  /* ---- motion ------------------------------------------------------
     ONE easing curve. Art direction §8 calls it the brand's motion
     signature: quick out, long settle. Do not introduce a second. ---- */
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-interaction: .25s;   /* hovers, toggles      — .2–.4s */
  --t-entrance:    .7s;    /* reveals, page enters — .7–1.5s */
}