/* The only place raw colours, font sizes and fonts are declared. Everything else uses these tokens. */
/* Headings: Silkscreen regular for every weight (its bold fills in W/M/E counters); never synthesized. */
@font-face { font-family: 'Silkscreen'; font-weight: 400 700; font-display: swap; src: url('../fonts/silkscreen-latin-400-normal.woff2') format('woff2'); }
:root {
  /* Surfaces — Moonforge night cloth */
  --bg-0: #060812;
  --bg-1: #0a0e1e;
  --bg-2: #131c38;
  --bg-3: #1f2d5a;
  --panel: rgb(10 14 30 / 94%);
  --panel-soft: rgb(10 14 30 / 80%);
  --scrim: rgb(6 8 18 / 62%);
  --scrim-strong: rgb(6 8 18 / 85%);
  --line: #2c4078;
  --line-strong: #4462a0;
  --text: #eef2fa;
  --text-dim: #a4b4d0;
  --text-faint: #6c7ea8;
  --ink: #1a1004;
  --shadow: rgb(0 0 0 / 55%);

  /* Meanings — one colour, one meaning */
  --you: #f4c440;
  --you-soft: rgb(244 196 64 / 12%);
  --you-glow: rgb(244 196 64 / 45%);
  --you-light: #ffe89a;
  --you-deep: #d09622;
  --you-edge: #5a3a10;
  --ally: #4f9be8;
  --ally-soft: rgb(79 155 232 / 10%);
  --ally-glow: rgb(79 155 232 / 45%);
  --enemy: #e8443a;
  --enemy-soft: rgb(232 68 58 / 10%);
  --hp: #4cc46a;
  --mana: #1aa0e8;
  --mana-tint: rgb(26 110 232 / 55%);
  --shield: #f2f2f2;
  --physical: #ff9a2e;
  --magic: #6ae0ff;
  --true: #ffffff;
  --owned: #3fd6b0;
  --levelup: #ffe89a;
  --levelup-glow: rgb(255 232 154 / 70%);
  --ready: #5cf08a;
  --cooldown-shade: rgb(6 8 18 / 82%);
  --locked: #555b6e;
  --armor: #c8a060;
  --resist: #b07ae8;
  --boss: #b07ae8;

  /* Forged moonsteel: the match HUD's frames (Tyler chose it on 26 October 2026: "do the forged moonsteel") */
  --steel: linear-gradient(#232c46, #121829 40%, #0a0e1c);
  --steel-flat: #161d32;
  --steel-line: #2b3555;
  --steel-dark: #05070e;
  --trim: #c9a24a;
  --trim-dark: #5a4520;
  --trim-socket: #7a6230;
  --steel-edge: 0 0 0 1px var(--steel-dark), inset 0 0 0 1px var(--trim-dark), inset 0 0 0 2px var(--bg-1), inset 0 0 0 3px var(--steel-line);
  --sheen: linear-gradient(rgb(255 255 255 / 26%), transparent 45%, rgb(0 0 0 / 22%));

  /* The client's moonsteel kit (layout A, Tyler 28 October 2026: "A is best"): faces under the pixel frames in
     /art/ui/ (kit.css), the column's cloth and the page shade over the arena backdrops. */
  --panel-steel: linear-gradient(#1e2640, #121829 34%, #0a0e1c);
  --panel-flat: rgb(10 14 28 / 92%);
  --plate: rgb(6 8 18 / 55%);
  --plate-edge: #161d32;
  --plate-sheen: #232c46;
  --face-steel: linear-gradient(#1a2240, #10162a);
  --face-steel-hover: linear-gradient(#222c52, #141b34);
  --face-steel-pressed: linear-gradient(#0c1122, #182040);
  --face-steel-disabled: linear-gradient(#11162a, #0c1020);
  --face-gold: linear-gradient(#ffe08a, #f4c440 46%, #d8a02a);
  --face-gold-hover: linear-gradient(#fff0b8, #ffd25a 46%, #e6ae32);
  --face-gold-pressed: linear-gradient(#d8a02a, #f0bc3c 54%, #ffe08a);
  --face-gold-disabled: linear-gradient(#5e5848, #4a4436);
  --gold-text-shade: rgb(255 240 180 / 55%);
  --column-cloth: linear-gradient(#0c1126, #070a16);
  --column-edge: #1b2440;
  --page-shade: radial-gradient(120% 90% at 50% 40%, rgb(6 8 18 / 55%), rgb(6 8 18 / 92%) 75%);
  --hero-shade: linear-gradient(90deg, rgb(6 8 18 / 96%) 0, rgb(6 8 18 / 88%) 28%, rgb(6 8 18 / 10%) 58%, transparent);
  --chip-face: #0b1022;
  --field: #070a16;
  --online: #5cf08a;
  --online-text: #9ff0b4;
  --in-match: #4f9be8;
  --in-match-text: #9cc8f4;
  --away: #555b6e;
  --bar-h: 88px;
  --column-w: 340px;
  --rail-w: 76px;

  /* Type */
  --font-body: 'Atkinson Hyperlegible Next', system-ui, sans-serif;
  --font-head: 'Silkscreen', 'Atkinson Hyperlegible Next', sans-serif;
  --t-badge: 13px;
  --t-xs: 14px;
  --t-s: 16px;
  --t-name: 17px;
  --t-m: 18px;
  --t-l: 24px;
  /* Silkscreen's pixel is 1/8 em: headings in it use multiples of 8 px (16, 24, 32, 40, 72, 112) so strokes stay even. */
  --t-xl-sm: 32px;
  --t-xl: 40px;
  --t-banner: 56px;
  --t-display: 72px;
  --t-hero: 112px;

  /* Space */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --radius: 2px;

  /* Layers: world < hud < overlay < banner < modal < cursor */
  --z-hud: 10;
  --z-overlay: 20;
  --z-banner: 30;
  --z-modal: 40;
  --z-toast: 50;

  /* Responsive HUD scale, set by ui/scale.ts */
  --ui-scale: 1;
}