/* ================================================================
   The Netball Umpire — Design Tokens
   "COURT" visual direction — the court itself is the visual world.
   Deep court-teal floor, chalk-white markings, bright bib accents,
   the whistle as the brand mark.

   Font @font-face declarations live separately in tnu-fonts.css.
   ================================================================ */

:root {
  /* ============================================================
     COURT — the playing surface, the canvas of the brand
     ============================================================ */
  --tnu-floor:        #0E3A38;  /* deep court-teal · primary brand surface */
  --tnu-floor-dk:     #082322;  /* deepest teal · footer, deep panels */
  --tnu-floor-tint:   #1A4A48;  /* lighter teal · hover states on floor */
  --tnu-floor-line:   rgba(250,247,239,0.18); /* chalk line on teal */

  /* ============================================================
     CHALK — the markings that define the court
     The "paper" half of the palette. Off-white, warm.
     ============================================================ */
  --tnu-chalk:        #FAF7EF;  /* chalk-white · text on floor, lines */
  --tnu-paper:        #F4EFE2;  /* page surface · warm off-white */
  --tnu-paper-dk:     #EAE3D0;  /* slightly darker paper · sub-surfaces */
  --tnu-paper-line:   rgba(10,30,29,0.12); /* ruled-line on paper */

  /* ============================================================
     INK — text on light surfaces, hard borders
     ============================================================ */
  --tnu-ink:          #0A1E1D;  /* near-black with green undertone */
  --tnu-ink-2:        #233936;  /* secondary text */
  --tnu-ink-3:        #56716E;  /* muted text */

  /* ============================================================
     BIBS — accent palette, mapped to playing positions
     ============================================================ */
  --tnu-bib-pink:     #FF3E8B;  /* GS / GA · position chip only, not a general accent */
  --tnu-bib-pink-dk:  #D11A65;
  --tnu-bib-yellow:   #FFD23F;  /* WA / C · ALSO the canonical brand accent */
  --tnu-bib-yellow-dk:#E6B91A;
  --tnu-bib-teal:     #1F8A82;  /* WD / GD · defence — bold darker teal */
  --tnu-bib-teal-dk:  #14625C;
  --tnu-bib-blue:     #3A8DA4;  /* GK · keeper */
  --tnu-bib-blue-dk:  #1F6377;

  /* ============================================================
     ACCENT — the canonical brand highlight
     One accent, applied consistently: yellow on dark, ink on light.
     ============================================================ */
  --tnu-accent:        var(--tnu-bib-yellow);
  --tnu-accent-fg:     var(--tnu-ink);
  --tnu-accent-dk:     var(--tnu-bib-yellow-dk);

  /* ============================================================
     ACCENT DOT — the dark counter to the yellow accent
     Burnt orange — warm, less loud than red, distinct from yellow.
     ============================================================ */
  --tnu-accent-dot:    #D85F26;
  --tnu-accent-dot-fg: var(--tnu-chalk);

  /* ============================================================
     SIGNAL — the directional red from the hand-signal photos
     ============================================================ */
  --tnu-signal:       #E0392C;
  --tnu-signal-dk:    #B62318;

  /* ============================================================
     SEMANTIC
     ============================================================ */
  --tnu-bg:           var(--tnu-paper);
  --tnu-surface:      var(--tnu-chalk);
  --tnu-fg:           var(--tnu-ink);
  --tnu-fg-muted:     var(--tnu-ink-3);
  --tnu-border:       var(--tnu-ink);
  --tnu-rule:         var(--tnu-paper-line);

  --tnu-success:      #1F8A5B;
  --tnu-warning:      var(--tnu-bib-yellow);
  --tnu-danger:       var(--tnu-signal);

  /* ============================================================
     GAME MANAGEMENT — five-step severity ladder (Rule 19)
     Calm green → yellow → amber → red → deep crimson.
     ============================================================ */
  --tnu-gm-advice:        #1F8A5B;  /* 1 · Proactive advice — calm, verbal */
  --tnu-gm-advice-fg:     var(--tnu-chalk);
  --tnu-gm-advance:       #FFD23F;  /* 2 · Advance — formal call, no penalty */
  --tnu-gm-advance-fg:    var(--tnu-ink);
  --tnu-gm-warning:       #F58A1F;  /* 3 · Warning — amber, on record */
  --tnu-gm-warning-fg:    var(--tnu-ink);
  --tnu-gm-suspension:    #E0392C;  /* 4 · Suspension — signal red */
  --tnu-gm-suspension-fg: var(--tnu-chalk);
  --tnu-gm-orderingoff:   #5C1611;  /* 5 · Ordering off — deep crimson, gone */
  --tnu-gm-orderingoff-fg:var(--tnu-chalk);

  /* ============================================================
     POSITION-BIB SYSTEM
     ============================================================ */
  --tnu-pos-GS:       var(--tnu-bib-pink);
  --tnu-pos-GS-fg:    var(--tnu-chalk);
  --tnu-pos-GA:       var(--tnu-bib-pink);
  --tnu-pos-GA-fg:    var(--tnu-chalk);
  --tnu-pos-WA:       var(--tnu-bib-yellow);
  --tnu-pos-WA-fg:    var(--tnu-ink);
  --tnu-pos-C:        var(--tnu-bib-yellow);
  --tnu-pos-C-fg:     var(--tnu-ink);
  --tnu-pos-WD:       var(--tnu-bib-yellow);
  --tnu-pos-WD-fg:    var(--tnu-ink);
  --tnu-pos-GD:       var(--tnu-bib-teal);
  --tnu-pos-GD-fg:    var(--tnu-chalk);
  --tnu-pos-GK:       var(--tnu-bib-teal);
  --tnu-pos-GK-fg:    var(--tnu-chalk);

  /* ============================================================
     TYPE — Fredoka, pushed hard. Big display, tight leading,
     negative tracking.
     ============================================================ */
  --tnu-font: 'Fredoka', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --tnu-display-xl:   clamp(72px, 9vw, 144px);
  --tnu-display-l:    clamp(56px, 6vw, 96px);
  --tnu-display-m:    clamp(40px, 4.4vw, 64px);

  --tnu-h1:           44px;
  --tnu-h2:           36px;
  --tnu-h3:           28px;
  --tnu-h4:           22px;
  --tnu-h5:           18px;

  --tnu-text-lead:    20px;
  --tnu-text-base:    17px;
  --tnu-text-sm:      14px;
  --tnu-text-xs:      12px;

  --tnu-eyebrow:      12px;
  --tnu-eyebrow-track: 0.18em;

  --tnu-w-light:    300;
  --tnu-w-regular:  400;
  --tnu-w-medium:   500;
  --tnu-w-semibold: 600;
  --tnu-w-bold:     700;

  --tnu-wdth-condensed:      75%;
  --tnu-wdth-semi-condensed: 87.5%;
  --tnu-wdth-regular:        100%;
  --tnu-wdth-semi-expanded:  112.5%;
  --tnu-wdth-expanded:       125%;

  --tnu-lh-tight:   0.9;
  --tnu-lh-snug:    1.1;
  --tnu-lh-normal:  1.45;
  --tnu-lh-loose:   1.6;

  --tnu-tr-display: -0.035em;
  --tnu-tr-tight:   -0.015em;
  --tnu-tr-normal:  0;
  --tnu-tr-wide:    0.06em;
  --tnu-tr-wider:   0.14em;
  --tnu-tr-widest:  0.22em;

  /* ============================================================
     SPACING — generous, 8px grid
     ============================================================ */
  --tnu-s-1:   4px;
  --tnu-s-2:   8px;
  --tnu-s-3:   12px;
  --tnu-s-4:   16px;
  --tnu-s-5:   24px;
  --tnu-s-6:   32px;
  --tnu-s-7:   48px;
  --tnu-s-8:   64px;
  --tnu-s-9:   96px;
  --tnu-s-10:  128px;

  --tnu-gutter:        56px;
  --tnu-gutter-mobile: 24px;

  /* ============================================================
     SHAPE — radii are chunky or zero
     ============================================================ */
  --tnu-r-sm:    8px;
  --tnu-r-md:    16px;
  --tnu-r-lg:    24px;
  --tnu-r-xl:    32px;
  --tnu-r-pill:  9999px;

  --tnu-bw:      2px;
  --tnu-bw-thin: 1px;
  --tnu-bw-thick:3px;

  /* ============================================================
     ELEVATION — restrained. Flat brand, ink border is the elevation cue.
     ============================================================ */
  --tnu-shadow-sm: 0 2px 0 var(--tnu-ink);
  --tnu-shadow-md: 0 8px 24px rgba(10,30,29,0.08);
  --tnu-shadow-lg: 0 20px 60px rgba(10,30,29,0.18);

  /* ============================================================
     MOTION
     ============================================================ */
  --tnu-ease:        cubic-bezier(0.2, 0.7, 0.3, 1);
  --tnu-dur-fast:    140ms;
  --tnu-dur:         260ms;
}

/* ================================================================
   BASE — applies Fredoka + ink-on-paper defaults to the page.
   ================================================================ */

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--tnu-bg);
  color: var(--tnu-fg);
  font-family: var(--tnu-font);
  font-size: var(--tnu-text-base);
  line-height: var(--tnu-lh-normal);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01';
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--tnu-font);
  font-weight: var(--tnu-w-bold);
  line-height: var(--tnu-lh-snug);
  letter-spacing: var(--tnu-tr-tight);
  color: inherit;
  margin: 0 0 var(--tnu-s-4);
}
h1 { font-size: var(--tnu-h1); }
h2 { font-size: var(--tnu-h2); }
h3 { font-size: var(--tnu-h3); }
h4 { font-size: var(--tnu-h4); }
h5 { font-size: var(--tnu-h5); font-weight: var(--tnu-w-semibold); }

p { margin: 0 0 var(--tnu-s-4); }
a { color: inherit; }

.tnu-display-xl { font-size: var(--tnu-display-xl); font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-tight); letter-spacing: var(--tnu-tr-display); }
.tnu-display-l  { font-size: var(--tnu-display-l);  font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-tight); letter-spacing: var(--tnu-tr-display); }
.tnu-display-m  { font-size: var(--tnu-display-m);  font-weight: var(--tnu-w-bold); line-height: var(--tnu-lh-snug);  letter-spacing: var(--tnu-tr-tight);   }

.tnu-eyebrow {
  font-size: var(--tnu-eyebrow);
  font-weight: var(--tnu-w-semibold);
  letter-spacing: var(--tnu-tr-widest);
  text-transform: uppercase;
  color: var(--tnu-fg-muted);
  display: inline-flex; align-items: center; gap: var(--tnu-s-3);
}

.tnu-lead {
  font-size: var(--tnu-text-lead);
  line-height: var(--tnu-lh-normal);
  color: var(--tnu-ink-2);
}

.tnu-tnum { font-feature-settings: 'tnum'; font-variant-numeric: tabular-nums; }