/* ═══════════════════════════════════════════════════
   LAYER 1 — TOKENS
   Colors ONLY. Zero sizes. Zero layout.
   Source of truth: maple-chat-bubble_16.html :root {}
   NEVER add sizes or layout values here.

   THEMES (2026-09-28)
   <html data-theme="light|dark" data-accent="teal|blue|violet|pink|raspberry|red|orange|green">
   is set before first paint by js/theme.js. Rules for everything downstream:
     • Chrome (panels, text, borders, hovers, shadows) → a token from here. Never
       a literal #fff / rgba(0,0,0,…) — those don't flip in dark mode.
     • Anything accent-coloured → --accent* (or color-mix on var(--accent)).
       Never the literal teal — it won't follow the user's swatch.
     • NOT themed, on purpose: user content + previews (sprite canvases, the
       light/dark/checker bg-dots, colour pickers), in-game MapleStory UI replicas,
       brand colours (Discord, Patreon). Leave those literal.
   ═══════════════════════════════════════════════════ */

:root {
  color-scheme: light;

  --bg:           #e8e8ec;  /* app body — mirrors --tab-inactive */
  --chrome:       #f0f0f3;  /* panel surfaces, preview toolbar */
  --chrome-hi:    #ffffff;  /* button bg, input bg, cards */
  --chrome-lo:    #eaeaee;  /* sidebar bg — mirrors --tab-active bg */
  --border:       #e0e0e4;  /* shell, toolbar, groupbox dividers */
  --border-lo:    #c8c8ce;  /* slider track, button borders */

  --text:         #1e1e1e;  /* primary text */
  --text-mid:     #484848;  /* labels, readouts */
  --text-dim:     #636370;  /* 4.84:1 on body — muted/placeholder text */
  --text-inv:     #ffffff;  /* text on accent / solid-colour surfaces (both themes) */

  --input-bg:     #ffffff;
  --input-border: #d0d0d6;

  --green:        #52a060;  /* status dot — ready; success text */
  --amber:        #c88a30;  /* status dot — loading; warning text */
  --red:          #b84040;  /* status dot — error; danger text */
  --danger-btn:   #c0392b;  /* solid destructive button bg (white text) */

  /* Derived sync tokens — must mirror their source */
  --tab-inactive: #e8e8ec;  /* MUST equal --bg */
  --tab-active:   #f8f8fa;  /* MUST equal .controls-col background */
  --tab-h:        38px;     /* reference only — not used in layout math */

  /* UX-polish pass additions (colors only, honoring the file rule) */
  --dark-bg:      #0b0e13;  /* dark preview/thumb wells (home map cards, tile previews) — same in both themes */
  --cell-grad:       linear-gradient(180deg, #f6f6f6 0%, #e8e8e8 100%); /* thumb-cell face */
  --cell-grad-hover: linear-gradient(180deg, #f0f0f0 0%, #e2e2e2 100%); /* thumb-cell hover */

  /* ── Theme pass (2026-09-28) — semantic tokens for what used to be literals ── */
  --hover:        rgba(0,0,0,0.04);   /* row / icon-button hover wash */
  --hover-strong: rgba(0,0,0,0.08);   /* pressed / selected-row wash */
  --divider:      rgba(0,0,0,0.08);   /* hairlines drawn over any surface */
  --shadow-soft:  rgba(0,0,0,0.08);   /* card rest shadow colour */
  --shadow:       rgba(0,0,0,0.14);   /* popover / menu shadow colour */
  --shadow-strong:rgba(0,0,0,0.28);   /* modal / drag shadow colour */
  --scrim:        rgba(0,0,0,0.45);   /* modal backdrop */
  --glass:        rgba(255,255,255,0.9); /* frosted chip over a thumb/canvas */
  --tip-bg:       #23262e;            /* tooltips stay dark in both themes */
  --tip-fg:       #f2f3f6;

  /* ── Accent — the user's swatch. Authored per swatch × theme below:
     --accent       decorative fills, borders, focus (not for text)
     --accent-text  ≥4.5:1 text on --chrome
     --accent-btn   ≥4.5:1 with white text
     The rest derive from those three, so a swatch only authors three values. */
  --accent:       #4a9ec0;
  --accent-text:  #257298;
  --accent-btn:   #2e7fa0;
  --accent-hi:    color-mix(in srgb, var(--accent) 72%, white);   /* hover */
  --accent-lo:    color-mix(in srgb, var(--accent-btn) 78%, black); /* pressed / btn border */
  --accent-glow:  color-mix(in srgb, var(--accent) 15%, transparent); /* focus ring */
  --accent-tint:  color-mix(in srgb, var(--accent) 10%, transparent); /* selected-row / chip wash */
  --accent-tint-hi: color-mix(in srgb, var(--accent) 20%, transparent); /* stronger wash / hover-on-selected */
  --accent-fill:  var(--accent);     /* solid accent fill UNDER WHITE TEXT (active segment, pill). Dark → --accent-btn */
  --info:         #2f6fc0;           /* non-accent 'info / planned' status ink */
}

/* ── Dark theme ───────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:           #16171b;
  --chrome:       #1e1f24;
  --chrome-hi:    #2a2c32;
  --chrome-lo:    #1a1b20;
  --border:       #2e3037;
  --border-lo:    #43464f;

  --text:         #e8e9ed;
  --text-mid:     #b8bac3;
  --text-dim:     #8e919c;  /* 5.3:1 on --chrome */
  --text-inv:     #ffffff;

  --input-bg:     #131418;
  --input-border: #3a3d45;

  --green:        #62b872;
  --amber:        #dea24c;
  --red:          #e46a6a;
  --danger-btn:   #b83a2e;

  --tab-inactive: #16171b;  /* MUST equal --bg */
  --tab-active:   #202127;  /* MUST equal .controls-col background */

  --dark-bg:      #0b0e13;
  --cell-grad:       linear-gradient(180deg, #34363d 0%, #2b2d33 100%);
  --cell-grad-hover: linear-gradient(180deg, #3b3d45 0%, #32343b 100%);

  --hover:        rgba(255,255,255,0.05);
  --hover-strong: rgba(255,255,255,0.09);
  --divider:      rgba(255,255,255,0.08);
  --shadow-soft:  rgba(0,0,0,0.30);
  --shadow:       rgba(0,0,0,0.45);
  --shadow-strong:rgba(0,0,0,0.65);
  --scrim:        rgba(0,0,0,0.62);
  --glass:        rgba(34,36,42,0.9);
  --tip-bg:       #33363e;
  --tip-fg:       #f2f3f6;

  --accent:       #58b0d2;
  --accent-text:  #7cc4e0;
  --accent-btn:   #2e7fa0;
  --accent-hi:    color-mix(in srgb, var(--accent) 80%, white);
  --accent-glow:  color-mix(in srgb, var(--accent) 28%, transparent);
  --accent-tint:  color-mix(in srgb, var(--accent) 14%, transparent);
  --accent-tint-hi: color-mix(in srgb, var(--accent) 26%, transparent);
  --accent-fill:  var(--accent-btn);
  --info:         #7fa9e8;
}

/* ── Accent swatches ──────────────────────────────────
   Teal is the default (the :root values above). Each swatch authors
   accent / accent-text / accent-btn for light, then for dark.
   Contrast targets: accent-text ≥4.5:1 on --chrome, accent-btn ≥4.5:1 vs white. */

:root[data-accent="blue"]   { --accent: #4a7fd8; --accent-text: #2a5db8; --accent-btn: #3366c4; }
:root[data-accent="violet"] { --accent: #8b6fd6; --accent-text: #6a4bbd; --accent-btn: #6f52c4; }
:root[data-accent="raspberry"] { --accent: #d6619c; --accent-text: #b03a78; --accent-btn: #b8407f; }
:root[data-accent="pink"]   { --accent: #ec6fa8; --accent-text: #b8326f; --accent-btn: #c93a7a; }
:root[data-accent="red"]    { --accent: #d65a4f; --accent-text: #b33a2f; --accent-btn: #bd3f33; }
:root[data-accent="orange"] { --accent: #e08a2e; --accent-text: #9c520a; --accent-btn: #ad5a0a; }
:root[data-accent="green"]  { --accent: #4aa36a; --accent-text: #267043; --accent-btn: #2d7d4a; }

:root[data-theme="dark"][data-accent="blue"]   { --accent: #6b9bef; --accent-text: #93b6f5; --accent-btn: #3366c4; }
:root[data-theme="dark"][data-accent="violet"] { --accent: #a08cf0; --accent-text: #bbaaf6; --accent-btn: #6f52c4; }
:root[data-theme="dark"][data-accent="raspberry"] { --accent: #ec7fb5; --accent-text: #f3a1c9; --accent-btn: #b8407f; }
:root[data-theme="dark"][data-accent="pink"]   { --accent: #f58cc0; --accent-text: #f9a8d0; --accent-btn: #c93a7a; }
:root[data-theme="dark"][data-accent="red"]    { --accent: #ec7a6f; --accent-text: #f49c93; --accent-btn: #bd3f33; }
:root[data-theme="dark"][data-accent="orange"] { --accent: #f0a050; --accent-text: #f5b872; --accent-btn: #ad5a0a; }
:root[data-theme="dark"][data-accent="green"]  { --accent: #5fc083; --accent-text: #86d6a3; --accent-btn: #2d7d4a; }