/* ============================================================
   YoGamezXR Arena — global theme tokens
   ZAS 2026 VR Gaming Tournament

   Single source of truth for text colour, type scale and weight across the
   arena screen, the player page and the admin console. Loaded before each
   page's own <style>, so pages consume these rather than redefining them.

   Contrast: every text token below is measured against the --bg canvas
   (#1F293B) and clears WCAG AA; most clear AAA (7:1). An earlier build leaned
   on very low alpha values — micro-labels sat between 1.3:1 and 3.4:1, i.e.
   legible on a designer's monitor and invisible on a trade-stand LED in
   daylight.

     token          composite     on #1F293B
     --text         #FFFFFF       14.6:1
     --text-body    #F5F5F5       13.4:1
     --text-2       .86 white     11.2:1
     --text-3       .74 white      8.7:1
     --blue         #4DD9E8        8.6:1
     --gold         #FFD54A       10.3:1
     --silver       #D8D8D8       10.2:1
     --bronze       #E3A063        6.6:1
     --red          #FF8F8F        6.7:1
     --violet       #C9A6FF        7.2:1
     --orange       #FF8A5C        6.3:1

   Accents are for highlights, numerals and short labels only — never for
   running text.
   ============================================================ */

:root {
  /* ── Surfaces ─────────────────────────────────────────── */
  /* --bg is the site-wide page colour, matched to the Econet YoGamezXR
     portal, whose landing gradient runs #253246 -> #1E2738. Every page
     background reads from here.
     --ink stays near-black: it is the colour of text sitting ON a bright
     accent (the cyan CTA), not a background. */
  --bg:         #1F293B;
  --bg-rgb:     31,41,59;
  --ink:        #000405;
  --black:      #000405;   /* retained alias so older rules keep resolving */
  --dim:        #16202F;
  --panel:      rgba(62,184,213,.07);
  --border:     rgba(62,184,213,.22);

  /* Econet pill CTA. The brand red is the only value in its family that
     satisfies both constraints on this canvas: white label 4.68:1 (AA) and
     the fill itself 3.12:1 against --bg, so the button's edge is discernible
     as a UI boundary. Darker reds fail the second, lighter ones the first. */
  --econet-red:    #E2231A;
  --econet-red-hi: #F5372D;

  /* ── Accents ──────────────────────────────────────────── */
  /* --blue is the text/highlight cyan, brightened from the brand value.
     --blue-deep keeps the original brand cyan for fills, borders and glows,
     where it is a surface rather than something to be read. */
  --blue:       #4DD9E8;
  --blue-deep:  #3EB8D5;
  --gold:       #FFD54A;
  --silver:     #D8D8D8;
  --bronze:     #E3A063;
  --red:        #FF8F8F;
  --green:      #5BFF3D;
  --violet:     #C9A6FF;   /* Fireworks effect button */
  --orange:     #FF8A5C;   /* Crowd Boost effect button — 8.9:1 */

  /* ── Text ramp ────────────────────────────────────────── */
  --text:       #FFFFFF;   /* headings, table headers, primary numerals */
  --text-body:  #F5F5F5;   /* running copy */
  --text-2:     rgba(255,255,255,.86);  /* secondary labels */
  --text-3:     rgba(255,255,255,.74);  /* faintest permitted — fine print */

  /* ── Type scale ───────────────────────────────────────── */
  /* 12px is a hard floor; nothing on any screen may go below it. */
  --fs-micro:   12px;   /* step numbers, fine print, badges */
  --fs-label:   14px;   /* labels, table headers, nav */
  --fs-body:    16px;   /* primary content */
  --fs-h3:      18px;
  --fs-h2:      22px;
  --fs-h1:      28px;

  /* ── Weights ──────────────────────────────────────────── */
  --fw-body:    400;
  --fw-med:     600;
  --fw-bold:    700;
  --fw-black:   900;

  /* ── Families ─────────────────────────────────────────── */
  /* Nunito is the brand face (the closest freely available match to the
     YoGamezXR manual's VAG Rounded) and is a clean, high-legibility
     humanist sans. It is kept as the primary, with a system stack behind
     it; the legibility problem was weight, size and opacity, not family. */
  --font: 'Nunito', 'Segoe UI', Roboto, system-ui, -apple-system, sans-serif;
  --mono: 'Share Tech Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;


  /* ── Raised surfaces and rules ─────────────────────────
     The pages used to paint panels with white at 1–5% alpha, which is
     invisible once the canvas is light. These carry the same intent — a
     surface just barely lifted off the ground — in whichever direction the
     current theme lifts. */
  --surface-1:  rgba(255,255,255,.02);
  --surface-2:  rgba(255,255,255,.035);
  --surface-3:  rgba(255,255,255,.05);
  --rule-1:     rgba(62,184,213,.12);
  --rule-2:     rgba(62,184,213,.22);
  --rule-3:     rgba(62,184,213,.32);

  /* Tells the browser to draw scrollbars and native form controls dark. */
  color-scheme: dark;
}

/* ============================================================
   LIGHT THEME

   The dark canvas above is the product's own world and stays the default.
   Light exists because the arena screen is a physical display in a hall: a
   stand under a marquee in Harare at midday is a very different lighting
   problem from an indoor LED wall, and an operator needs to be able to force
   the readable one rather than hope the venue cooperates.

   Structure: the tokens are redefined for all three of the viewer's possible
   states — an OS set to light with no explicit choice, and an explicit choice
   in either direction. Components only ever read the tokens, never a literal,
   so nothing has to be restyled per theme.

   Accents are re-derived rather than lightened, because a colour tuned to sit
   on #1F293B is unreadable on #F2F5F8. Every value below was measured against
   the light canvas: all clear 3:1 as marks, and the text tokens clear AA.

     token       light value   on #F2F5F8
     --blue      #0089A7       4.4:1
     --gold      #94690A       4.5:1
     --red       #AD1457       6.4:1
     --green     #1B7F3B       4.6:1
     --violet    #6B4FBF       5.9:1

   One caveat worth writing down: --green and --gold sit close together for a
   protanope (ΔE 4.0), as --green and --gold already do on the dark canvas.
   They are status colours rather than chart series and never appear as
   adjacent marks, so the rule everywhere in this product is that sentiment and
   state ship with their word — "Positive", "Negative", "Live" — and colour
   only ever reinforces the label. Do not introduce a place where the hue alone
   carries the meaning.
   ============================================================ */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:         #F2F5F8;
    --bg-rgb:     242,245,248;
    --ink:        #000405;
    --black:      #000405;
    --dim:        #E4EAF1;
    --panel:      rgba(31,41,59,.045);
    --border:     rgba(31,41,59,.16);

    --econet-red:    #E2231A;
    --econet-red-hi: #C41C14;

    --blue:       #0089A7;
    --blue-deep:  #00738C;
    --gold:       #94690A;
    --silver:     #5C6672;
    --bronze:     #8A5A2B;
    --red:        #AD1457;
    --green:      #1B7F3B;
    --violet:     #6B4FBF;
    --orange:     #B4501F;

    --text:       #0E1726;
    --text-body:  #17202E;
    --text-2:     rgba(14,23,38,.82);
    --text-3:     rgba(14,23,38,.66);


    --surface-1:  rgba(19,32,51,.05);
    --surface-2:  rgba(19,32,51,.075);
    --surface-3:  rgba(19,32,51,.10);
    --rule-1:     rgba(19,32,51,.10);
    --rule-2:     rgba(19,32,51,.17);
    --rule-3:     rgba(19,32,51,.26);

    color-scheme: light;
  }
}

:root[data-theme="light"] {
  --bg:         #F2F5F8;
  --bg-rgb:     242,245,248;
  --ink:        #000405;
  --black:      #000405;
  --dim:        #E4EAF1;
  --panel:      rgba(31,41,59,.045);
  --border:     rgba(31,41,59,.16);

  --econet-red:    #E2231A;
  --econet-red-hi: #C41C14;

  --blue:       #0089A7;
  --blue-deep:  #00738C;
  --gold:       #94690A;
  --silver:     #5C6672;
  --bronze:     #8A5A2B;
  --red:        #AD1457;
  --green:      #1B7F3B;
  --violet:     #6B4FBF;
  --orange:     #B4501F;

  --text:       #0E1726;
  --text-body:  #17202E;
  --text-2:     rgba(14,23,38,.82);
  --text-3:     rgba(14,23,38,.66);

  --surface-1:  rgba(19,32,51,.05);
  --surface-2:  rgba(19,32,51,.075);
  --surface-3:  rgba(19,32,51,.10);
  --rule-1:     rgba(19,32,51,.10);
  --rule-2:     rgba(19,32,51,.17);
  --rule-3:     rgba(19,32,51,.26);

  color-scheme: light;
}

/* An explicit dark choice must beat an OS set to light. */
:root[data-theme="dark"] {
  --bg:         #1F293B;
  --bg-rgb:     31,41,59;
  --dim:        #16202F;
  --panel:      rgba(62,184,213,.07);
  --border:     rgba(62,184,213,.22);

  --econet-red:    #E2231A;
  --econet-red-hi: #F5372D;

  --blue:       #4DD9E8;
  --blue-deep:  #3EB8D5;
  --gold:       #FFD54A;
  --silver:     #D8D8D8;
  --bronze:     #E3A063;
  --red:        #FF8F8F;
  --green:      #5BFF3D;
  --violet:     #C9A6FF;
  --orange:     #FF8A5C;

  --text:       #FFFFFF;
  --text-body:  #F5F5F5;
  --text-2:     rgba(255,255,255,.86);
  --text-3:     rgba(255,255,255,.74);
  --surface-1:  rgba(255,255,255,.02);
  --surface-2:  rgba(255,255,255,.035);
  --surface-3:  rgba(255,255,255,.05);
  --rule-1:     rgba(62,184,213,.12);
  --rule-2:     rgba(62,184,213,.22);
  --rule-3:     rgba(62,184,213,.32);

  color-scheme: dark;
}

/* ── Theme toggle ───────────────────────────────────────────
   Shared by all three screens. Small, quiet, and never the loudest control
   on the page — on the arena screen it is a setup-time affordance, not
   something anyone touches during play. */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--panel);
}
.theme-toggle button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.theme-toggle button:hover { color: var(--text); }
.theme-toggle button[aria-pressed="true"] {
  background: var(--blue);
  color: var(--ink);
}
.theme-toggle svg { width: 15px; height: 15px; display: block; }
.theme-toggle button:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle button { transition: none; }
}


/* ── Inline SVG colour mapping ──────────────────────────────
   Every icon on these pages was authored with the dark canvas literal baked
   into its fill/stroke attribute. A presentation attribute loses to any CSS
   rule, so mapping them here re-themes all of them at once and keeps the
   markup untouched. New icons should use currentColor instead. */
[fill="#FFD700"] { fill: var(--gold); }
[stroke="#FFD700"] { stroke: var(--gold); }
[fill="#C0C0C0"] { fill: var(--silver); }
[stroke="#C0C0C0"] { stroke: var(--silver); }
[fill="#CD7F32"] { fill: var(--bronze); }
[stroke="#CD7F32"] { stroke: var(--bronze); }
[fill="#3EB8D5"] { fill: var(--blue-deep); }
[stroke="#3EB8D5"] { stroke: var(--blue-deep); }
[stroke="#FF4444"] { stroke: var(--red); }
[fill="rgba(62,184,213,.6)"] { fill: var(--blue-deep); }
[stroke="rgba(62,184,213,.8)"] { stroke: var(--blue-deep); }
[stroke="rgba(62,184,213,.35)"] { stroke: var(--text-3); }

/* A flex or grid container ignores the hidden attribute unless told not to,
   which is how a panel marked hidden still ends up on the arena screen. */
[hidden] { display: none !important; }

/* ── YoGamezXR wordmark on a light canvas ───────────────────
   "YoGamez" is white in the brand and "XR" is cyan, so the mark has no
   dark-ground version to swap to. Rather than recolour a logo — which is not
   ours to redraw — it sits on the brand navy when the canvas is light, which
   is the treatment the manual specifies for light backgrounds. The Econet
   mark does ship both versions and is swapped in app.js instead. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .yg-logo,
  :root:not([data-theme="dark"]) .topbar-logo {
    background: #1F293B;
    padding: 6px 10px;
    border-radius: 8px;
    box-sizing: content-box;
  }
}
:root[data-theme="light"] .yg-logo,
:root[data-theme="light"] .topbar-logo {
  background: #1F293B;
  padding: 6px 10px;
  border-radius: 8px;
  box-sizing: content-box;
}