/* Toxics Land 4.0 - the one place colours, type and surfaces are set, for the staff dashboard AND the public site.
   Loaded last on every page (after app.css + app-ui3.css, or public.css + ui3.css), so these win.
   Rules: one neutral base (green-grey), one accent (toxic green), status colours only for real states
   (green works / amber needs a look / red broken / grey off). Flat surfaces: borders group things, shadows only on what
   floats (menus, modals, toasts). Headings Barlow Condensed, body Source Sans 3, commands JetBrains Mono.
   tools/design_lint.py fails the build if gradients, glows, shadows or new fonts creep back. */

@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600 650; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("/fonts/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-display: swap; }

/* ------------------------------------------------------------------ the tokens */
:root, :root[data-ui="3"], :root[data-ui="3"][data-theme] {   /* [data-theme] so the mappings beat ui3's light literals */
  color-scheme: dark;
  /* neutrals: a near-black with a slight green bias, never pure grey */
  --t-bg: #0b0f0c; --t-bg2: #0f1410; --t-s1: #131a15; --t-s2: #172019; --t-s3: #1d271f;
  --t-line: #212b24; --t-line2: #2e3a31;
  --t-text: #e6efe8; --t-text2: #b4c3b8; --t-muted: #869689;
  /* the one accent */
  --t-acc: #46d35f; --t-acc-rgb: 70,211,95; --t-acc-hover: #5fdf75; --t-acc-ink: #04130a;
  /* status (not decoration) */
  --t-ok: #46d35f; --t-warn: #e6a046; --t-warn-rgb: 230,160,70; --t-bad: #ef6a5f; --t-bad-rgb: 239,106,95; --t-off: #869689;
  --t-float: 0 16px 40px -20px rgba(0,0,0,.7);
  --t-font: "Source Sans 3", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --t-mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* public site names */
  --fg: 230,239,232;
  --bg: var(--t-bg); --bg2: var(--t-bg2); --card: var(--t-s1); --card2: var(--t-s2); --card3: var(--t-s3); --slot: #151b17;
  --line: var(--t-line); --line2: var(--t-line2);
  --text: var(--t-text); --text2: var(--t-text2); --muted: var(--t-muted);
  --acc-rgb: var(--t-acc-rgb); --acc: var(--t-acc); --acc2: var(--t-acc-hover); --acc-ink: var(--t-acc-ink);
  --btn: var(--t-acc); --btn-hover: var(--t-acc-hover); --btn-ink: var(--t-acc-ink);
  --amber-rgb: var(--t-warn-rgb); --amber: var(--t-warn); --red-rgb: var(--t-bad-rgb); --red: var(--t-bad);
  /* gold, blue and purple were decoration: gold folds into amber, blue and purple into quiet text */
  --gold-rgb: var(--t-warn-rgb); --gold: var(--t-warn); --gold2: var(--t-warn);
  --blue-rgb: 180,195,184; --blue: var(--t-text2); --purple: var(--t-text2);
  --top-bg: var(--t-bg); --glass: var(--t-bg); --glass2: var(--t-bg); --compose-bg: var(--t-s1); --toast-bg: var(--t-s3);
  --shadow: none; --shadow-lg: var(--t-float); --glow: none; --hero-a: transparent; --hero-b: transparent;
  --rule: var(--t-line2); --mark: var(--t-acc);
  --font: var(--t-font); --display: var(--t-display); --mono: var(--t-mono); --pixel: var(--t-mono);

  /* staff dashboard names */
  --accent: var(--t-acc); --accent2: var(--t-acc); --gold-soft: rgba(var(--t-acc-rgb),.12); --accent-ink: var(--t-acc-ink);
  --panel: var(--t-s1); --panel2: var(--t-s2); --panel3: var(--t-s3);
  --red-soft: rgba(var(--t-bad-rgb),.12); --amber-soft: rgba(var(--t-warn-rgb),.12);
  --blue-soft: rgba(180,195,184,.08); --purple-soft: rgba(180,195,184,.08);
  --shadow-sm: none; --brand: var(--t-acc); --brand2: var(--t-acc);
}
:root[data-theme="light"], :root[data-ui="3"][data-theme="light"], :root[data-ui="3"][data-theme="light"][data-theme] {
  color-scheme: light;
  --t-bg: #f3f6f3; --t-bg2: #e9eee9; --t-s1: #ffffff; --t-s2: #f7f9f7; --t-s3: #edf2ee;
  --t-line: #d8e0da; --t-line2: #c3cfc6;
  --t-text: #121a14; --t-text2: #3d4a40; --t-muted: #5d6c61;
  --t-acc: #15803d; --t-acc-rgb: 21,128,61; --t-acc-hover: #116a32; --t-acc-ink: #ffffff;
  --t-ok: #15803d; --t-warn: #a15c00; --t-warn-rgb: 161,92,0; --t-bad: #b42318; --t-bad-rgb: 180,35,24; --t-off: #5d6c61;
  --t-float: 0 16px 36px -20px rgba(18,26,20,.35);
  --fg: 18,26,20; --slot: #2a302b;
  --blue-rgb: 61,74,64;
}

/* ------------------------------------------------------------------ type */
:root body, :root[data-ui="3"] body { font-family: var(--t-font); }
:root h1, :root .head h1, :root .pgh h1, :root .pg-title, :root .page-h h1 {
  font-family: var(--t-display); font-weight: 700; letter-spacing: -0.005em; line-height: 1.12; text-wrap: balance;
}
:root h2, :root h3, :root .ttl, :root .card-h h3, :root .sec3-h h2 {
  font-family: var(--t-display); font-weight: 600; letter-spacing: 0; line-height: 1.2;
}
/* condensed headings read small at the old sizes: a step up */
:root .pgh h1, :root .head h1, :root .pg-title { font-size: 32px; }
:root .page-h h1 { font-size: 40px; }
:root[data-ui="3"] h2 { font-size: 1.32em; }
@media (max-width: 640px) { :root .page-h h1 { font-size: 32px; } :root .pgh h1, :root .head h1 { font-size: 28px; } }
:root p, :root li { line-height: 1.65; }
:root code, :root kbd, :root pre, :root .mono { font-family: var(--t-mono); }
/* uppercase labels get a little air */
:root .eyebrow, :root .ph-eye, :root .lbl-up { letter-spacing: .06em; }

/* ------------------------------------------------------------------ surfaces */
/* glass bars become solid; only the top bar keeps a light blur */
:root .menu, :root .modal, :root [role="dialog"], :root .toast, :root .tt-pop, :root .popover { box-shadow: var(--t-float); }
/* the Halloween arcade pages: no per-game side stripes (colour edges are for severity only) */
:root .ar-game .top { border-left: 0; }
:root .pa-game { grid-template-columns: minmax(0, 1fr); }
:root .pa-game .bar { display: none; }

/* motion only shows state */
@media (prefers-reduced-motion: reduce) { :root *, :root *::before, :root *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* home hero: the screenshot gets one flat scrim (it had a stack of gradient fades) so the words stay readable */
:root .hero-bg::after { background: rgba(7,12,9,.6); }
@media (max-width: 760px) { :root .hero-bg::after { background: rgba(7,12,9,.72); } }
:root .sv-hero.has-bg::before { background: var(--sv-hero-bg) center / cover no-repeat; opacity: .35; }
:root .h3-shot::after { background: rgba(7,12,9,.62); }
@media (max-width: 760px) { :root .h3-shot::after { background: rgba(7,12,9,.3); } }
:root .pb-art::after { background: rgba(7,12,9,.6); }

/* stat strips: no rainbow of side stripes; the number itself turns amber / red when it needs a look */
:root .sumchip::before { display: none; }
:root .sumchip.warn b, :root .sumchip.warn .num { color: var(--t-warn); }
:root .sumchip.bad b, :root .sumchip.bad .num { color: var(--t-bad); }

/* light mode: Minecraft-coloured names (&e yellow, &b aqua...) can't be read on white, so they sit on a dark chip like in game */
:root[data-theme="light"] .cr-nm, :root[data-theme="light"] .bg-tt .nm, :root[data-theme="light"] .wg-tt .nm,
:root[data-theme="light"] .gr-ac .nm, :root[data-theme="light"] .ps-ico + div > .nm { background: #26292c; padding: 1px 8px 2px; border-radius: 6px; display: inline-block; max-width: 100%; }
/* an item picture that can't load shows a short name: keep it small and inside its box */
:root .cr-ico .fb, :root .bg-ico .fb { font-size: 10px; line-height: 1.15; text-align: center; color: var(--t-muted); max-width: 100%; max-height: 100%; overflow: hidden; padding: 2px; word-break: break-word; }
:root[data-theme="light"] :is(.bg-tt, .wg-tt, .gr-ac) .nm, :root[data-theme="light"] .ps-ico + div > .nm { display: block; width: max-content; margin-bottom: 2px; }