/* Design tokens. Every UI color in app.css, leader-assignment.css, theme.css and
   the CSS injected by *-ui.js resolves through these names, so light/dark is a
   token swap only. Game art (equipment board metal, portraits, rarity colors,
   tooltips) intentionally keeps fixed colors in both themes.

   Theme selection: follows the OS unless html[data-theme] is set by theme-ui.js. */
:root {
  color-scheme: light;

  --font-sans: "Pretendard Variable", Pretendard, Inter, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  --bg: #f5f6f8;
  --surface: #ffffff;
  --surface-2: #f8f9fb;
  --surface-3: #eef0f4;
  --surface-hover: #f3f4f8;

  --line: #e7e9ee;
  --line-strong: #d6dae2;

  --ink: #111827;
  --text-2: #454d5d;
  --muted: #6b7383;
  --faint: #9ca3b0;

  --accent: #5b5bd6;
  --accent-hover: #4b4bc8;
  --accent-text: #4a4ac4;
  --accent-soft: #eff0ff;
  --accent-border: #c6c8f7;
  --on-accent: #ffffff;
  --focus-ring: rgba(91, 91, 214, .22);
  --accent-glow: rgba(91, 91, 214, .32);
  --accent-shadow: rgba(91, 91, 214, .28);

  --success: #1f9d61;
  --success-soft: #ecfaf2;
  --success-text: #13794a;
  --warn: #d48a12;
  --warn-soft: #fff7e8;
  --warn-text: #94580a;
  --warn-border: #efc676;
  --danger: #d9423f;
  --danger-soft: #fff1f0;
  --danger-text: #bf2f2c;
  --info-soft: #ebf5ff;
  --info-text: #1f6aad;
  --info-border: #a4c8ec;
  --disabled-bg: #c4c9d3;

  --side-bg: #ffffff;
  --side-text: #1f2533;
  --side-text-2: #4a5263;
  --side-muted: #8b92a1;
  --side-hover: #f2f3f7;
  --side-active-bg: var(--accent-soft);
  --side-active-text: var(--accent-text);
  --side-line: #eceef2;
  --side-brand: var(--accent);

  --topbar-bg: rgba(255, 255, 255, .82);
  --board-from: #e9eef6;
  --board-to: #f2d5ba;
  --overlay: rgba(15, 18, 30, .46);

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 1px 2px rgba(16, 24, 40, .04), 0 4px 12px rgba(16, 24, 40, .05);
  --shadow-lg: 0 24px 56px -16px rgba(16, 24, 40, .28), 0 2px 6px rgba(16, 24, 40, .06);

  /* Equipment grade backgrounds (game art: identical in light and dark). */
  --grade-legendary: linear-gradient(145deg, #fbd66b 0%, #e39a2e 52%, #a85a17 100%);
  --grade-epic: linear-gradient(145deg, #cf9cff 0%, #9257e0 52%, #5a2aa0 100%);
  --grade-elite: linear-gradient(145deg, #86c3ff 0%, #3f86e0 52%, #1d4f9f 100%);
  --grade-advanced: linear-gradient(145deg, #9be37f 0%, #4caf4f 52%, #226b30 100%);
  --grade-normal: linear-gradient(145deg, #ffffff 0%, #e4e7ec 55%, #b8bec8 100%);
  --slot-line: rgba(20, 24, 32, .2);

  /* Legacy names still referenced by older rules and injected CSS. */
  --panel: var(--surface);
  --navy: var(--side-bg);
  --blue: var(--accent);
  --gold: var(--warn);
  --green: var(--success);
  --red: var(--danger);
  --shadow: var(--shadow-md);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0c0e13;
    --surface: #13161d;
    --surface-2: #181c24;
    --surface-3: #20242e;
    --surface-hover: #1c2029;
    --line: #242933;
    --line-strong: #323845;
    --ink: #eceef3;
    --text-2: #b7bdc9;
    --muted: #8b93a3;
    --faint: #5f6776;
    --accent: #7b7ef0;
    --accent-hover: #8f92f5;
    --accent-text: #a9abff;
    --accent-soft: rgba(123, 126, 240, .14);
    --accent-border: rgba(123, 126, 240, .42);
    --focus-ring: rgba(123, 126, 240, .3);
    --accent-glow: rgba(123, 126, 240, .4);
    --accent-shadow: rgba(0, 0, 0, .35);
    --success: #3bbf7f;
    --success-soft: rgba(59, 191, 127, .13);
    --success-text: #6fd8a3;
    --warn: #e6a53a;
    --warn-soft: rgba(230, 165, 58, .13);
    --warn-text: #f1c472;
    --warn-border: rgba(230, 165, 58, .42);
    --danger: #e5534f;
    --danger-soft: rgba(229, 83, 79, .14);
    --danger-text: #ff8f8b;
    --info-soft: rgba(84, 160, 245, .13);
    --info-text: #82bcff;
    --info-border: rgba(84, 160, 245, .42);
    --disabled-bg: #3a404c;
    --side-bg: #101319;
    --side-text: #e6e8ee;
    --side-text-2: #aab1bf;
    --side-muted: #6e7686;
    --side-hover: #1a1e27;
    --side-line: #1f232c;
    --topbar-bg: rgba(12, 14, 19, .78);
    --board-from: #262b35;
    --board-to: #463829;
    --slot-line: rgba(255, 255, 255, .16);
    --overlay: rgba(0, 0, 0, .6);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .22);
    --shadow-lg: 0 28px 64px -16px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e13;
  --surface: #13161d;
  --surface-2: #181c24;
  --surface-3: #20242e;
  --surface-hover: #1c2029;
  --line: #242933;
  --line-strong: #323845;
  --ink: #eceef3;
  --text-2: #b7bdc9;
  --muted: #8b93a3;
  --faint: #5f6776;
  --accent: #7b7ef0;
  --accent-hover: #8f92f5;
  --accent-text: #a9abff;
  --accent-soft: rgba(123, 126, 240, .14);
  --accent-border: rgba(123, 126, 240, .42);
  --focus-ring: rgba(123, 126, 240, .3);
  --accent-glow: rgba(123, 126, 240, .4);
  --accent-shadow: rgba(0, 0, 0, .35);
  --success: #3bbf7f;
  --success-soft: rgba(59, 191, 127, .13);
  --success-text: #6fd8a3;
  --warn: #e6a53a;
  --warn-soft: rgba(230, 165, 58, .13);
  --warn-text: #f1c472;
  --warn-border: rgba(230, 165, 58, .42);
  --danger: #e5534f;
  --danger-soft: rgba(229, 83, 79, .14);
  --danger-text: #ff8f8b;
  --info-soft: rgba(84, 160, 245, .13);
  --info-text: #82bcff;
  --info-border: rgba(84, 160, 245, .42);
  --disabled-bg: #3a404c;
  --side-bg: #101319;
  --side-text: #e6e8ee;
  --side-text-2: #aab1bf;
  --side-muted: #6e7686;
  --side-hover: #1a1e27;
  --side-line: #1f232c;
  --topbar-bg: rgba(12, 14, 19, .78);
  --board-from: #262b35;
  --board-to: #463829;
  --slot-line: rgba(255, 255, 255, .16);
  --overlay: rgba(0, 0, 0, .6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .22);
  --shadow-lg: 0 28px 64px -16px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
}