/* ============================================================
   ROAR Command Centre design tokens.

   The nine @font-face rules below are the ONLY exception to "this is a
   copy of colors_and_type.css": that file's 18 rules point at relative
   fonts/*.ttf paths that do not resolve under public/, and the Command
   Centre previously loaded Montserrat and JetBrains Mono from the Google
   Fonts CDN via a <link> in the shell head. Task 12 of cc-cleanup
   self-hosts the whole app's type instead, so the CDN link is gone and
   these nine rules replace it: self-hosted, subsetted (latin-only)
   woff2, served from /fonts/ with an immutable cache header (see
   server.js static setHeaders and lib/auth-exempt.js, both of which
   enumerate these nine exact paths). Montserrat files are subset with
   `python3 -m fontTools.subset` from the design system's source TTFs
   at ~/roar-active-design-system/project/fonts/; JetBrains Mono is not
   in that repo, so its three woff2 files were fetched once from Google
   Fonts (latin subset) and committed as binaries alongside this file.

   Lines after the font-face block to the end of the :root block are a
   COPY of ~/roar-active-design-system/project/colors_and_type.css
   (copied, not symlinked, per spec section A3). Three things were
   changed in the copy because they do not apply here:
     - the 18 @font-face rules, superseded by the nine self-hosted ones
       above.
     - the @import of the JetBrains Mono Google Fonts stylesheet, same
       reason.
     - every " - " in a comment was an em dash upstream. House
       style forbids them, so each became a colon.
   When the design system changes, re-copy and re-apply those
   three edits, then re-run: node test/contrast.js.

   Everything below the "COMMAND CENTRE SEMANTIC LAYER" banner is
   Command-Centre-only and is not part of the design system.
   This is the ONLY file allowed to hold raw hex literals
   (test/no-raw-hex.js enforces that).
   ============================================================ */

@font-face {
  font-family: 'Montserrat';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/montserrat-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/montserrat-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/montserrat-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/montserrat-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/montserrat-800.woff2') format('woff2');
}
@font-face {
  font-family: 'Montserrat';
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/montserrat-900.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-500.woff2') format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jetbrains-mono-700.woff2') format('woff2');
}

/* ============================================================
   ROAR ACTIVE: Colors & Type
   Foundational design tokens.
   ------------------------------------------------------------
   Type: Montserrat (official brand family, full weight range).
   Accent colour is still provisional pending brand PDF.
   ============================================================ */


:root {
  /* ===================== COLORS ========================== */

  /* Brand core: official monochrome palette (from brand PDF) */
  --roar-black:        #161617;   /* brand Black */
  --roar-grey:         #3b3c3f;   /* brand Grey */
  --roar-charcoal:     #4a4b4d;   /* brand Charcoal */
  --roar-white:        #fafafb;   /* brand White */

  /* Black Tint scale (from PDF, anchored at #232326): 10 steps */
  --roar-tint-100:     #232326;
  --roar-tint-90:      #39393c;
  --roar-tint-80:      #4f4f52;
  --roar-tint-70:      #666669;
  --roar-tint-60:      #7c7c7f;
  --roar-tint-50:      #929295;
  --roar-tint-40:      #a9a9ab;
  --roar-tint-30:      #bfbfc1;
  --roar-tint-20:      #d5d5d6;
  --roar-tint-10:      #ebebec;

  /* Legacy aliases (kept for compat with existing components) */
  --roar-off-black:    var(--roar-tint-100);
  --roar-ink:          var(--roar-black);
  --roar-graphite:     var(--roar-tint-80);
  --roar-steel:        var(--roar-tint-60);
  --roar-stone:        var(--roar-tint-50);
  --roar-concrete:     var(--roar-tint-30);
  --roar-fog:          var(--roar-tint-20);
  --roar-mist:         var(--roar-tint-10);
  --roar-bone:         var(--roar-white);

  /* Accent: BRAND IS PURE MONOCHROME. No colour accents per guidelines.
     These aliases resolve to black so legacy refs stay on-brand. */
  --roar-signal:       var(--roar-black);
  --roar-signal-hot:   var(--roar-tint-100);
  --roar-signal-deep:  #000000;

  /* Category accents removed: use type weight, size and monochrome tint
     to differentiate categories, not colour. Aliases resolve to neutrals. */
  --roar-ember:        var(--roar-black);
  --roar-ice:          var(--roar-tint-50);
  --roar-pulse:        var(--roar-black);

  /* Semantic: functional */
  --color-bg:               var(--roar-bone);
  --color-bg-alt:           var(--roar-white);
  --color-bg-inverse:       var(--roar-black);
  --color-bg-elevated:      var(--roar-white);
  --color-bg-elevated-dark: var(--roar-off-black);

  --color-fg:               var(--roar-ink);
  --color-fg-muted:         var(--roar-graphite);
  --color-fg-subtle:        var(--roar-steel);
  --color-fg-inverse:       var(--roar-white);
  --color-fg-on-signal:     var(--roar-white);   /* primary CTA is black with white text */

  --color-border:           var(--roar-fog);
  --color-border-strong:    var(--roar-concrete);
  --color-border-inverse:   rgba(255,255,255,0.14);
  --color-divider:          var(--roar-fog);

  --color-accent:           var(--roar-signal);
  --color-accent-hover:     var(--roar-signal-hot);
  --color-accent-press:     var(--roar-signal-deep);

  /* Functional states: kept utilitarian only; not for decorative use */
  --color-success:          #2D9A4E;
  --color-warning:          #E8A52A;
  --color-danger:           #C8102E;
  --color-info:             var(--roar-charcoal);

  /* ===================== TYPE ============================ */

  --font-display:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;   /* weight 900 */
  --font-condensed: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;   /* weight 700/800 */
  --font-body:      'Montserrat', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Weight scale */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-black:   900;

  /* Size scale (rem-based; root = 16px)
     Athletic brands punch big: scale is aggressive at the top end. */
  --fs-xs:    0.75rem;   /* 12 */
  --fs-sm:    0.875rem;  /* 14 */
  --fs-base:  1rem;      /* 16 */
  --fs-md:    1.125rem;  /* 18 */
  --fs-lg:    1.25rem;   /* 20 */
  --fs-xl:    1.5rem;    /* 24 */
  --fs-2xl:   2rem;      /* 32 */
  --fs-3xl:   2.5rem;    /* 40 */
  --fs-4xl:   3.25rem;   /* 52 */
  --fs-5xl:   4.5rem;    /* 72 */
  --fs-6xl:   6rem;      /* 96: hero display */
  --fs-7xl:   8rem;      /* 128: editorial takeovers */

  /* Line heights */
  --lh-tight:   1.02;
  --lh-snug:    1.15;
  --lh-normal:  1.4;
  --lh-relaxed: 1.6;

  /* Letter-spacing: condensed uppercase loves air */
  --ls-tight:    -0.02em;
  --ls-normal:    0em;
  --ls-wide:      0.04em;
  --ls-wider:     0.08em;
  --ls-widest:    0.16em;   /* for all-caps labels */

  /* ===================== SPACING ========================= */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ===================== RADII =========================== */
  /* ROAR skews sharp/industrial. Radii are small. Pills for CTAs. */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   16px;
  --radius-pill: 999px;

  /* ===================== SHADOWS ========================= */
  /* Primarily flat. Elevation is done via hard borders or solid hard-shadow
     offsets (think ticket stubs / event posters), not soft blur. */
  --shadow-xs:  0 1px 0 rgba(0,0,0,0.04);
  --shadow-sm:  0 2px 6px rgba(0,0,0,0.06);
  --shadow-md:  0 8px 20px rgba(0,0,0,0.08);
  --shadow-lg:  0 24px 48px rgba(0,0,0,0.14);

  /* Hard "poster" shadow: brand-specific. Always black, no blur. */
  --shadow-hard-sm: 3px 3px 0 var(--roar-black);
  --shadow-hard-md: 6px 6px 0 var(--roar-black);
  --shadow-hard-lg: 10px 10px 0 var(--roar-black);

  /* Focus ring: monochrome, grey halo outside black outline */
  --ring: 0 0 0 2px var(--roar-black), 0 0 0 5px var(--roar-tint-30);

  /* ===================== MOTION ========================== */
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0);
  --dur-fast:      140ms;
  --dur-base:      220ms;
  --dur-slow:      420ms;

  /* ===================== Z-INDEX ========================= */
  --z-base:    1;
  --z-raised:  10;
  --z-nav:     100;
  --z-overlay: 500;
  --z-modal:   1000;
  --z-toast:   1500;
}

/* ============================================================
   Semantic element styles: reusable class names map to brand voice
   ============================================================ */

/* Displays (hero / section takeover) */
.roar-display-hero {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(3.25rem, 8vw, var(--fs-7xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.roar-display-1 {
  font-family: var(--font-display);
  font-weight: var(--fw-black);
  font-size: clamp(2.5rem, 6vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.roar-display-2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.5vw, var(--fs-5xl));
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

/* Headings: Montserrat Bold / ExtraBold uppercase for athletic feel */
.roar-h1 {
  font-family: var(--font-condensed);
  font-weight: 800;
  font-size: var(--fs-4xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.roar-h2 {
  font-family: var(--font-condensed);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}
.roar-h3 {
  font-family: var(--font-condensed);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
}
.roar-h4 {
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
}

/* Eyebrow / kicker: small all-caps label above a heading */
.roar-eyebrow {
  font-family: var(--font-condensed);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Body */
.roar-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  text-wrap: pretty;
}
.roar-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--color-fg);
  text-wrap: pretty;
}
.roar-small {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-fg-muted);
}
.roar-micro {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-fg-muted);
}

/* Numeric: stats, timetables, member counts */
.roar-stat {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-variant-numeric: tabular-nums;
}
.roar-tabular {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-normal);
}

/* ============================================================
   COMMAND CENTRE SEMANTIC LAYER
   Role tokens. Components reference ONLY these, never a --roar-* value.
   Light is the default; dark is bound under :root[data-theme="dark"].
   Every pair below is contrast-tested by test/contrast.js at >= 4.5:1.
   ============================================================ */

/* The shell's own reset. Not a token, but it has to land before base.css
   and tokens.css is the first stylesheet in the head. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  color-scheme: light;

  --bg:         var(--roar-white);      /* #fafafb bone */
  --surface:    var(--roar-white);      /* cards are flat: separation is the 2px border */
  --surface-2:  var(--roar-tint-10);    /* hover fills, table headers, chips */
  --line:       var(--roar-tint-20);
  --text:       var(--roar-black);
  --text-muted: var(--roar-grey);
  --text-dim:   var(--roar-tint-70);    /* tint-60 measures 4.00:1 on bone, too low */
  --accent:     var(--roar-black);      /* brand is monochrome: the accent IS black */
  --ok:         #1e7a3c;                /* darkened --color-success for 4.5:1 on bone */
  --warn:       #8a5c00;                /* darkened --color-warning, same reason */
  --no:         var(--color-danger);    /* #C8102E, 5.65:1 on bone */

  /* Chart series ramp: monochrome (spec section A3), black down to tint-60.
     Every step is painted as a legend swatch or a graph dot, so all six are
     graphical objects and all six must clear WCAG 1.4.11's 3:1 against both
     --bg and --surface-2, not just the darkest one. --surface-2 is the binding
     ground here; tint-50 measures 2.60:1 on it, so the ramp stops at tint-60
     (3.49:1) and uses consecutive tint steps to fit six inside that range. */
  --chart-1: var(--roar-black);
  --chart-2: var(--roar-tint-100);
  --chart-3: var(--roar-tint-90);
  --chart-4: var(--roar-tint-80);
  --chart-5: var(--roar-tint-70);
  --chart-6: var(--roar-tint-60);

  /* Hard poster shadows, in the ink of the current theme. The design system
     ships --shadow-hard-* at 3/6/10px and always brand black; the Command
     Centre's three sizes are 2/3/4px and must invert with the theme, so they
     stay separate tokens rather than aliases. */
  --shadow-poster:    4px 4px 0 var(--text);
  --shadow-poster-md: 3px 3px 0 var(--text);
  --shadow-poster-sm: 2px 2px 0 var(--text);

  /* Lion hologram halo. White in BOTH themes on purpose: the halo is the
     hologram device, not the ink, and the design system's answer to "what
     colour is the glow" is the same one it gives everywhere else, no colour.
     It was amber before A2, and routing it through --accent instead would make
     it black on the light ground, which is a shadow, not a halo. Not a text or
     ground pair, so test/contrast.js does not read it. */
  --lion-glow: rgba(250, 250, 251, 0.42);

  /* The three brand marks in the shell are white-on-transparent PNGs. The mark
     is monochrome, so inverting the white asset gives exactly the black asset;
     that is one filter instead of rewriting three image sources per toggle. */
  --logo-invert: 1;

  /* The design-system --ring is pinned to brand black, which is invisible on a
     dark ground. Re-point it at the ink of the current theme so focus stays
     visible in both. Defined once here: the values are already theme-aware. */
  --ring: 0 0 0 2px var(--text), 0 0 0 5px var(--line);
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:         var(--roar-black);
  --surface:    var(--roar-tint-100);
  --surface-2:  var(--roar-tint-90);
  --line:       var(--roar-tint-80);
  --text:       var(--roar-white);
  --text-muted: var(--roar-tint-30);
  --text-dim:   var(--roar-tint-40);    /* tint-50 measures 3.71:1 on tint-90 */
  --accent:     var(--roar-white);
  --ok:         #4ade80;
  --warn:       var(--color-warning);   /* #E8A52A, 8.48:1 on brand black */
  --no:         #fb8a8a;                /* red-400 #f87171 measures 4.16:1 on tint-90, too low */

  /* Same rule inverted: tint-60 measures 2.77:1 on tint-90, so the dark ramp
     runs white down to tint-50 (3.71:1). */
  --chart-1: var(--roar-white);
  --chart-2: var(--roar-tint-10);
  --chart-3: var(--roar-tint-20);
  --chart-4: var(--roar-tint-30);
  --chart-5: var(--roar-tint-40);
  --chart-6: var(--roar-tint-50);

  --logo-invert: 0;
}

/* ============================================================
   PRINT / PDF SNAPSHOT: ?print=1 adds body.print (router at
   public/js/70-people.js). Paper is white whichever theme the screen is in,
   so the whole light role set is re-declared here rather than only the
   background: `background: white` under the dark theme leaves --text at
   #fafafb, which is white ink on white paper.

   Scoped to body, not :root, on purpose. Tokens inherit, so a declaration on
   <body> beats the html-level :root[data-theme="dark"] one for body and every
   descendant, which is the whole page. It lives in tokens.css and not in
   print.css because it needs the hex literals and the --roar-* value tokens,
   and this is the only file allowed either (test/no-raw-hex.js and the value-
   token check in test/css-order.js). Keep it byte-identical to the :root block
   above: a token added there and forgotten here prints in its dark value.
   ============================================================ */
body.print {
  color-scheme: light;

  --bg:         var(--roar-white);
  --surface:    var(--roar-white);
  --surface-2:  var(--roar-tint-10);
  --line:       var(--roar-tint-20);
  --text:       var(--roar-black);
  --text-muted: var(--roar-grey);
  --text-dim:   var(--roar-tint-70);
  --accent:     var(--roar-black);
  --ok:         #1e7a3c;
  --warn:       #8a5c00;
  --no:         var(--color-danger);

  --chart-1: var(--roar-black);
  --chart-2: var(--roar-tint-100);
  --chart-3: var(--roar-tint-90);
  --chart-4: var(--roar-tint-80);
  --chart-5: var(--roar-tint-70);
  --chart-6: var(--roar-tint-60);

  --shadow-poster:    4px 4px 0 var(--text);
  --shadow-poster-md: 3px 3px 0 var(--text);
  --shadow-poster-sm: 2px 2px 0 var(--text);

  --lion-glow: rgba(250, 250, 251, 0.42);
  --logo-invert: 1;
  --ring: 0 0 0 2px var(--text), 0 0 0 5px var(--line);
}