/* The only place colour is defined. Values are from the King's Cup brand guidelines,
   April 2024, page 15. Never inline a hex anywhere else. */
:root {
  --deep-green: #002706;
  --vivid-green: #0BF419;
  --mid-green: #048C3F;
  --shadow-gold: #B68000;
  --mid-gold: #D7A122;
  --highlight-gold: #FEF6B0;
  --gold-gradient: linear-gradient(100deg, var(--shadow-gold) 0%, var(--mid-gold) 45%, var(--highlight-gold) 100%);
  /* White is not in the six-colour palette but the guidelines set type in it throughout,
     including the mono negative logo. It is declared here so it is still one place. */
  --white: #FFFFFF;

  /* MATCH-OFFICIAL CARD COLOURS. These are deliberately NOT part of the King's Cup
     palette, and nothing outside the card chips and the shoot-out tracker may use them.

     Client ruling, Tom 2026-08-06: "Use the real red for the red card."

     The reasoning that ruling settles: a referee's card is not a brand element. It is a
     law-of-the-game signal that a stadium reads by COLOUR before it reads any word, and
     the palette holds no red to say it with. So these sit on the same footing as team kit
     colours, which the seed already stores as data: facts about the match, not choices
     about the brand. They live here rather than inline so the one-place rule still holds.

     The yellow moves with it. Mid Gold read correctly on its own, but beside a true red it
     read as a brand colour rather than as the other half of a matched pair of cards. If
     the yellow should go back to Mid Gold, that is one line here and one in the test. */
  --card-yellow: #FFCC00;
  --card-red: #E1121C;

  /* OPERATOR CONSOLE COLOURS. Also deliberately not the brand palette: the console is a
     working surface that sits beside a preview monitor whose colours must be judged
     true, so its chrome is neutral near-black and its states use the broadcast
     conventions an operator already knows (program red, preview green, attention
     amber). Nothing from this block may appear in a graphic; the colour law holds
     because this file is the one place colour lives. */
  --ui-bg: #0E1114;
  --ui-panel: #171B1F;
  --ui-raised: #21262B;
  --ui-line: #2E353B;
  --ui-text: #E9ECEE;
  --ui-dim: #97A1A9;
  --ui-live: #E13B30;
  --ui-pvw: #2AA764;
  --ui-amber: #E8A13A;

  /* Client ruling 2026-08-11: the whole package played too fast from the stands.
     One register slower across the board; the ratios between in/out/stagger hold. */
  --dur-in: 1.15s;
  --dur-out: 0.7s;
  --dur-bg: 0.35s;

  /* Task 15 (screen-format survival, 2026-08-12): Tom's ruling, "we just don't know what
     the screen will be like, so adaptive is probably best." The venue screens' feed mode
     (scale vs centre-crop) and pixel maps are unknown, so the FRAME stays 1920x1080 and
     the rings stay full-bleed always (a cropped screen still sees a full background); only
     CONTENT compresses toward centre. These two tokens are that compression: every content
     padding/inset in graphics.css reads them instead of a literal 160px/200px, and
     public/js/safe.mjs derives every runtime fit budget (SAFE_W, COL_W, NAME_BUDGET, the
     rest) from them too, so a shrunk safe rect shrinks what text is allowed to claim.
     These values ARE the package's long-standing content-safe zone (spec 9.3: 1520x760,
     i.e. 1920 - 2*200 by 1080 - 2*160), now named rather than repeated as bare numbers.
     output.html overwrites both on :root, before any graphic ever renders, when the page
     is loaded with ?safe=W:H; left alone, these defaults are the whole package's 16:9
     behaviour, unchanged. */
  --safe-x: 200px;
  --safe-y: 160px;
}

/* The delivered pack is a Desktop licence, so the installed font is preferred and the
   served file is a development fallback only. See spec section 9.4. */
/* Name each face precisely. Both installed weights share the family name 'Effra' and
   differ only by full name, so a bare local('Effra') fallback inside the 700 face could
   resolve to Effra Regular and let the browser synthesise a fake bold for every heading.
   That is the same defect as faux italic and is invisible without measuring, so the
   family-only fallback is deliberately absent. Verified installed names on macOS:
   full name 'Effra Bold' / PostScript 'Effra-Bold', and 'Effra Regular' / 'Effra-Regular'. */
@font-face {
  font-family: 'Effra';
  font-weight: 700;
  font-style: normal;
  src: local('Effra Bold'), local('Effra-Bold'),
       url('/assets/fonts/Effra_Bd.ttf') format('truetype');
}

@font-face {
  font-family: 'Effra';
  font-weight: 400;
  font-style: normal;
  src: local('Effra Regular'), local('Effra-Regular'),
       url('/assets/fonts/Effra_Rg.ttf') format('truetype');
}

/* Set on html, not just body, so head/meta/title/link (unrendered but still walked by
   getComputedStyle) inherit Effra and white rather than the user-agent's black serif
   default. Everything inherits Effra, so nothing can accidentally fall back to a
   system face. */
html, body {
  font-family: 'Effra', sans-serif;
  font-style: normal;
  color: var(--white);
}

.h1, .h2, .body, .num {
  font-family: 'Effra', sans-serif;
  font-style: normal;
}

/* Headings are Effra Bold, capitals. */
.h1 { font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: 96px; }
.h2 { font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: 48px; }
/* Subheadings and body are Effra Regular, title case. */
.body { font-weight: 400; font-size: 32px; }
/* Reserved for long-form copy. This catalogue has none, so graphics use .h1 and .h2. */
/* Tabular figures, so the running clock cannot jitter as digit widths change. */
.num { font-weight: 700; font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }

[dir='rtl'] { text-align: right; }