/* Design tokens: "Sharp Midnight", the one theme. Square geometry, hairline borders, one accent color.
   The accent follows the player's map color (--player*, set by applyTheme in app.js), falling back to brand gold.
   Pre-redesign variables (--card, --line, --muted, ...) are mapped onto these so older screens follow along. */

/* The low-priority layer each area file's structural defaults sit in (see the top of base.css, shell.css, ...). */
@layer foundation;

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --font-ui: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-head: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --font-display: 'Cinzel', 'Trajan Pro', 'Palatino Linotype', Georgia, serif;
  --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace;

  --bg: #08080a;
  --bg-glow: #17140f;
  --bg-elev: #0d0d10;
  --surface: #131316;
  --surface-2: #19191d;
  --surface-3: #222227;
  --surface-glass: rgb(17 17 20 / .88);
  --border: rgb(255 240 215 / .08);
  --border-strong: rgb(255 240 215 / .16);
  --text: #efece6;
  --text-2: #a8a399;
  --text-3: #8c877d;
  /* Bevel: a lit top edge and a dark lower edge, so panels read as plates on the war-room table. */
  --bevel: inset 0 1px 0 rgb(255 245 225 / .06), inset 0 -1px 0 rgb(0 0 0 / .5);

  --brand: #d9b25b;
  /* The brand gold on the deepest panels (the sign-in screen). */
  --brand-on-dark: #d9b25b;
  --accent: var(--player, var(--brand));
  --accent-2: var(--player-2, #f2dc9e);
  --accent-ink: #0b0d12;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 45%, transparent);
  --good: #4ade80;
  --good-soft: rgb(74 222 128 / .12);
  --bad: #f87171;
  --bad-soft: rgb(248 113 113 / .12);
  --info: #7aaeff;
  --info-soft: rgb(122 174 255 / .12);
  --violet: #b294ff;
  --violet-soft: rgb(178 148 255 / .13);

  --shadow-sm: none;
  --shadow: 0 1px 0 rgb(255 255 255 / .03) inset;
  /* Elevation: what floats over the page (dialogs, popups, toasts), and a card lifted under the pointer. */
  --shadow-lg: 0 24px 60px rgb(0 0 0 / .55), 0 0 0 1px rgb(255 255 255 / .06);
  --shadow-lift: 0 18px 36px -14px rgb(0 0 0 / .75), 0 10px 30px -12px color-mix(in srgb, var(--accent) 45%, transparent);
  --ring: 0 0 0 1px var(--accent);

  /* Type scale: every font size is one of these steps. */
  --fs-2xs: 10px; --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 18px;
  --fs-2xl: 20px; --fs-3xl: 24px; --fs-4xl: 28px; --fs-5xl: 32px; --fs-6xl: 40px; --fs-7xl: 48px;
  /* Spacing scale: --space-n is n x 2px. Padding, margins and gaps use a step. */
  --space-1: 2px; --space-2: 4px; --space-3: 6px; --space-4: 8px; --space-5: 10px; --space-6: 12px; --space-7: 14px;
  --space-8: 16px; --space-9: 18px; --space-10: 20px; --space-12: 24px; --space-14: 28px; --space-16: 32px; --space-24: 48px;

  --radius-sm: 5px;
  --radius: 7px;
  --radius-lg: 12px;
  --radius-pill: 6px;
  --sidebar-w: 248px;
  --sidebar-compact-w: 64px;
  --content-max: 1280px;
  /* Motion vocabulary (motion.css): one easing family and four durations. Fast for hovers and presses, the default for
     state changes, slow for panels that move, enter for content arriving. */
  --ease: cubic-bezier(.2, .7, .1, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
  --dur-fast: 100ms;
  --dur: 160ms;
  --dur-slow: 260ms;
  --dur-enter: 360ms;

  /* Game colors with a fixed meaning: coins, a bounty (WANTED) and fire (win streaks). */
  --coin: #f1c453;
  --coin-text: #f3c64e;
  --wanted: #ef4444;
  /* Chart series, in fixed order (validated categorical palette, dark steps): blue, orange, aqua, yellow. */
  --viz-1: #3987e5; --viz-2: #d95926; --viz-3: #199e70; --viz-4: #c98500;
  --wanted-deep: #b91c1c;
  --fire: #ff3d00;
  --amber: #f59e0b;
  /* Fixed inks: pure white and black for highlights and shadows, the near-black ink on bright fills, the deep sea under
     the map, text on the deepest panels (rank cards, the sign-in screen, cosmetic art), the Trios
     color, and the warning tone of taxes and fees. */
  --white: #fff;
  --shade: #000;
  --ink: #0b0d12;
  --sea-deep: #070a12;
  --on-dark: #eaedf6;
  --on-dark-2: #c6cde0;
  --on-dark-3: #9aa4c0;
  --trios: #6d4ed8;
  --trios-2: #7d5ff0;
  --warn: #f0b061;

  /* Pre-redesign names */
  --gold: #d9a93f;
  --gold2: #f1d78a;
  --accent-alt: var(--gold);
  --panel-dash: color-mix(in srgb, var(--accent-alt) 40%, transparent);
  --bg2: var(--bg-elev);
  --card: var(--surface);
  --card2: var(--surface-2);
  --line: var(--border-strong);
  --muted: var(--text-2);
  --blue: var(--info);
  --serif: var(--font-display);
  --mono: var(--font-mono);
  --panel: var(--surface-glass);
  --panel-edge: var(--border-strong);
  --sea: #0a1428;
  --on-gold: var(--accent-ink);
}

/* Lit plates, the war room's identity: every panel is a surface under a wash of the player's own banner color from the
   top-left and a soft lamp light from the top edge, so the room takes the color of whoever is in it. Lobby cards, the
   game HUD and the replay share it. --lamp is the pointer's light on a card (motion.js sets --lx/--ly). */
:root {
  --plate-light: linear-gradient(180deg, rgb(255 250 240 / .04), transparent 38%);
  --plate-wash: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 55%);
  --plate: var(--plate-light), var(--plate-wash), var(--surface);
  --plate-2: var(--plate-light), var(--plate-wash), var(--surface-2);
  --glass-edge: linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 55%, transparent) 30%, color-mix(in srgb, var(--accent-2) 70%, transparent) 50%, color-mix(in srgb, var(--accent) 55%, transparent) 70%, transparent);
  --lamp: radial-gradient(420px circle at var(--lx, 50%) var(--ly, -30%), color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
}

/* Phones: the game's bottom navigation bar, which floating panels sit above. */
@media (max-width: 900px) {
  :root { --mobile-nav-height: calc(54px + env(safe-area-inset-bottom, 0px)); }
}

/* Equipped skins used to recolor the player's own panels; the interface follows the player's color instead
   (skins still style the map). */
body[data-skin] {
  --bg2: var(--bg-elev); --card: var(--surface); --card2: var(--surface-2); --line: var(--border-strong);
  --panel: var(--surface-glass); --panel-edge: var(--border-strong);
}