/* Verdict design tokens: the ONE place colours, fonts and radii are defined.
   Every page links this file in its <head>; pages may add their own extra
   tokens, but never redefine these (they used to be copied into five pages and
   had already drifted apart). The light theme rewrites them below. */
:root{
  --ground:#090e1a; --ground-2:#0d1424; --card:rgba(255,255,255,.045);
  --text:#f0ede6; --soft:#b9b3a4; --dim:#8d8a80;   /* 4.5:1+ on a card (was #7d7a70: 4.1) */
  --gold:#e8c773; --gold-2:#c79a44; --ember:rgba(232,199,115,.14);
  /* The gold of the brand itself, the SAME in both themes: buttons, medals,
     the in-match HUD and anything drawn on a surface that stays dark. (--gold
     above is the gold of TEXT on the page, and turns to ink in the light
     theme.) Pages use these instead of writing the hex values again; they
     were written out ~460 times. --gold-rgb is for transparent golds:
     rgba(var(--gold-rgb), .25). */
  --gold-hi:#e8c773; --gold-rgb:232,199,115; --gold-deep:#c79a44;
  --gold-pale:#f6e3ae; --gold-ink:#221805;
  --coin:#f0c674;   /* Denarii: the brighter gold of the coin, one value instead of five copies */
  --line:rgba(240,237,230,.08); --line-gold:rgba(232,199,115,.25);
  --ok:#9fd8a8; --bad:#e08a6a; --elo:#22d3ee;
  --disp:'Fraunces',Georgia,serif; --sans:'Outfit',system-ui,sans-serif;
  --r:18px;
  /* Type scale: the sizes text comes in. A page's own title is --fs-title (the
     .page-title class), a section's --fs-xl (.section-title). Pages used to
     set their own h1 at 24, 29, 32, 36, 40 or 42px. */
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:15px; --fs-lg:18px; --fs-xl:20px;
  --fs-title:clamp(28px,3.6vw,40px);
  /* Corners: cards, controls (fields, small buttons), pills */
  --r-card:20px; --r-ctl:12px; --r-pill:999px;
  /* Content widths: three, not six. Wide = the navbar, footer and app pages;
     read = long text and single tables; form = settings-type pages. */
  --w-wide:1280px; --w-read:800px; --w-form:640px;
  /* Layers, lowest to highest. Global pieces take their z-index from here, so two
     of them can't land on the same value by accident (a popover and the navbar,
     two modals, the loading bar and a modal all used to share one).
     Breakpoints, for new CSS: 374 (narrow phone), 520, 760 (phone/desktop
     switch, the navbar's), 1000. */
  --z-hud:20; --z-panel:40; --z-nav:60; --z-loadbar:65; --z-bnav:70; --z-popover:80;
  --z-float:120; --z-drawer:150; --z-modal:200; --z-modal-2:210; --z-toast:220;
  --z-confirm:230; --z-skip:300;
}
html[data-theme="light"]{
  --ground:#eef2f9; --ground-2:#e2e8f4; --card:rgba(255,255,255,.66);
  --text:#1c2740; --soft:#46536f; --dim:#566173;
  --gold:#7a5408; --gold-2:#6e5010; --ember:rgba(150,105,15,.12);   /* text gold: 4.5:1+ on tinted cards too (#8f6410 was 3.7-4.3) */
  --coin:#8a6110;
  --line:rgba(28,39,64,.10); --line-gold:rgba(184,137,47,.30);
  --ok:#276b39; --bad:#a5472a; --elo:#0a6a85;   /* 4.5:1+ on the page and cards, tinted tags too (were 3.6 / 3.8; ok was #2e7d43, 4.25 on a tag) */
  --card-bg:rgba(255,255,255,.66);
}

/* <img> carries its file's width/height so the browser holds the space while it
   loads (no jump). With zero specificity, any rule that sizes an image wins;
   this only keeps a CSS width from pairing with the attribute's height. */
:where(img[width][height]){ height:auto; }

/* ---- Buttons: ONE definition for every page (it used to be redefined, with
   different sizes and colours, in _base, landing, settings and error). Pages may
   size a button for their layout; they don't restyle it. */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  border:none; font-family:var(--sans); font-weight:500; font-size:14.5px; padding:12px 24px;
  border-radius:999px; text-align:center; text-decoration:none;
  -webkit-tap-highlight-color:transparent;   /* iOS paints its own grey box otherwise */
  transition:transform .2s, box-shadow .2s, border-color .2s, background .2s; }
.btn:active{ transform:scale(.97); }
.btn-gold{ background:linear-gradient(180deg,var(--gold),var(--gold-2)); color:#221805;
  box-shadow:0 6px 20px rgba(199,154,68,.25); }
.btn-gold:hover{ transform:translateY(-1px); box-shadow:0 10px 28px rgba(199,154,68,.4); }
/* Opaque on purpose, and no backdrop-filter: a see-through soft button inside a
   blurred card was composited by iOS as a solid white pill with the label gone. */
.btn-soft{ background:#1a2133; color:var(--text); border:1px solid var(--line); }
.btn-soft:hover{ background:#222b41; border-color:rgba(255,255,255,.2); transform:translateY(-1px); }
.btn-danger{ background:transparent; color:var(--bad); border:1px solid rgba(224,138,106,.35); }
.btn-danger:hover{ background:rgba(224,138,106,.1); }

/* a load that failed: message + retry (verdictFail in _base.html, #231) */
.vd-fail{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  padding:18px 12px; color:var(--soft); font-size:13.5px; line-height:1.5; }
.vd-fail .vd-fail-retry{ min-height:36px; }
.vd-fail-banner{ margin:0 0 16px; border:1px solid rgba(224,101,90,.35); border-radius:14px;
  background:rgba(224,101,90,.06); }