/* ═══════════════════════════════════════════════════════════════
   AFTERMATH GAMING — Design Tokens
   ───────────────────────────────────────────────────────────────
   Single source of truth for colour, type, spacing and motion
   across the public site AND the Server Manager / tooling pages.

   Load this file FIRST on every page:
     <link rel="stylesheet" href="css/tokens.css">
   Public pages then load css/style.css (component layer).
   Tool/admin pages keep their own page-level CSS but must only
   reference the variables defined here.

   Colour values follow images/brand/BRAND.md (the brand sheet):
   silver is the brand colour, blood red is the accent, black and
   charcoal are the environment. Red is a hairline / rim light,
   never a large surface. If more than ~5% of a screen is red, it
   is wrong.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Surfaces: Black → Charcoal → Graphite ──
     Sections alternate --bg-0 / --bg-1. Panels and cards --bg-2.
     Hover --bg-3. Nothing else. */
  --bg-0: #080809;   /* Black     — page background */
  --bg-1: #0E0F11;   /* alternating section background */
  --bg-2: #141517;   /* Charcoal  — cards, columns, nav, modals */
  --bg-3: #1B1D20;   /* hover / raised step on charcoal */
  --bg-4: #242629;   /* Graphite  — strongest raised surface, solid dividers */

  /* ── Hairlines (never red-tinted) ── */
  --line:   rgba(236,237,240,0.08);
  --line-2: rgba(236,237,240,0.14);

  /* ── Brand: silver scale ──
     100 = Silver Hi, 300 = Silver, 500 = mid step for secondary
     text (5.6:1 on --bg-0), 700 = Silver Lo (decorative only). */
  --silver-100: #ECEDF0;
  --silver-300: #B0B3B9;
  --silver-500: #8A8E95;
  --silver-700: #62666E;
  --chrome: linear-gradient(180deg, #ECEDF0 0%, #B0B3B9 46%, #62666E 100%);

  /* ── Accent: blood red ──
     --ember is the brand red (the ONE primary button per viewport,
     the live dot, hairlines). --red is its hover, --blood its
     active/pressed state. --red-tint is the only red surface
     allowed (featured column tint, warning callouts). */
  --ember:    #D61620;
  --red:      #B0121B;
  --blood:    #6E0A10;
  --red-tint: rgba(214,22,32,0.10);
  --red-glow: #FF2828;   /* rim light only — the live dot's pulse ring. Never a fill, never text. */

  /* ── Semantic: the ONLY other hues allowed on the public site ── */
  --ok:   #5FA86F;   /* online, permitted, success, "copied" */
  --warn: #C9A24A;   /* one desaturated amber for "changed" only — never a button, never gold text */

  /* ── Alert red (dashboard only — stays true red, never brand red) ── */
  --red2: #E74C3C;

  /* ── Text ── */
  --white: #F4F5F7;
  --pale:  var(--silver-100);   /* headings, primary text */
  --cream: #C9CCD1;             /* dashboard body copy */
  --mist:  #9DA2AB;             /* dashboard secondary copy */
  --fog:   var(--silver-500);   /* tertiary / placeholders / meta */

  /* ── Status / category (desaturated to sit on charcoal; dashboard + loot DB) ── */
  --green:  var(--ok);
  --blue:   #5B9EC0;
  --purple: #9577A8;
  --teal:   #4FA79B;
  --p1: #C4574E;   /* priority 1 / critical */
  --p2: #C98C45;   /* priority 2 / high */
  --p3: #5B9EC0;   /* priority 3 / medium */
  --p4: #63AE7C;   /* priority 4 / low / done */
  --p5: #6B7280;   /* priority 5 / none */

  /* ── Typography: one pairing ──
     Barlow Condensed = display (statements), Barlow = body/UI.
     Michroma lives only inside the logo assets (see BRAND.md).
     Mono is reserved for small data strips: IP, status, countdown
     labels, table heads, tags. Never above 12px. */
  --font-display: 'Barlow Condensed', 'Arial Narrow', Impact, sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --font-ui:      var(--font-body);

  /* ── Spacing (4px base) ── */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px;  --s-8: 64px; --s-9: 96px; --s-10: 128px;

  /* ── Motion ── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --fast: 0.15s;
  --base: 0.3s;
  --transition: var(--fast) var(--ease);

  /* ═══ Legacy aliases ═══
     Kept so older page-level CSS (Server Manager, loot DB, legacy
     login) keeps resolving. New code uses the canonical names. */
  --void:    var(--bg-0);
  --abyss:   var(--bg-1);
  --panel:   var(--bg-2);
  --lift:    var(--bg-3);
  --border:  var(--line);
  --border2: var(--bg-4);
  --border-r: var(--line);        /* red-tinted borders are retired */
  --silver:        var(--silver-300);
  --silver-bright: var(--silver-100);
  --silver-dim:    var(--silver-700);
  --orange: var(--silver-500);    /* rainbow category chips are retired */
  --amber:  var(--silver-100);
  --gold:   var(--silver-300);
  --gold2:  var(--silver-100);
  --gold3:  var(--white);
  --bg:       var(--bg-0);
  --surface:  var(--bg-2);
  --surface2: var(--bg-3);
  --text:     var(--pale);
  --text2:    var(--mist);
  --text3:    var(--fog);
  --font-lore: var(--font-body);
}