/* tokens.css — replaces themes/default/tokens.css AND themes/dark/tokens.css.
   Light is the default; dark applies with html[data-theme="dark"] (set by the
   toggle in base.html and persisted in localStorage) or, when no choice was
   made, by the OS preference. Game accents are shared by both themes. */
:root {
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px;

  --font-family: "IBM Plex Sans JP", "IBM Plex Sans KR", -apple-system, system-ui, sans-serif;
  --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
  --font-size-base: 14px; --font-size-sm: 12px; --font-size-xs: 11px; --font-size-lg: 16px; --font-size-xl: 22px;
  --line-height-base: 1.5;

  --radius-sm: 4px; --radius: 6px; --radius-lg: 10px;
  --border-width: 1px;
  --border-radius: var(--radius); /* legacy alias */

  --shadow-sm: 0 1px 2px rgba(16, 20, 28, 0.06);
  --shadow-drawer: -12px 0 40px rgba(16, 20, 28, 0.18);

  /* Surfaces */
  --page-bg: #f5f6f8;
  --surface-bg: #ffffff;
  --surface-bg-alt: #f5f6f8;
  --surface-bg-raised: #ffffff;
  --surface-bg-sunken: #eceef2;
  --surface-overlay: rgba(255, 255, 255, 0.85);
  --overlay-bg: rgba(16, 20, 28, 0.45);

  /* Borders */
  --border-color: #e1e4ea;
  --border-color-light: #edeff3;
  --border-color-strong: #c6ccd6;

  /* Text */
  --text-primary: #1b1f26;
  --text-secondary: #565e6b;
  --text-muted: #8b94a2;
  --text-inverse: #ffffff;
  --text-link: #1f6fbf;
  --text-link-hover: #14508c;

  /* Interactive */
  --interactive-bg: #ffffff;
  --interactive-bg-hover: #f0f2f5;
  --interactive-bg-active: #e6e9ee;
  --interactive-border: #d3d8e0;
  --interactive-focus-ring: #1f6fbf;
  --control-fill: #1b1f26;          /* primary button, checked box */
  --control-fill-text: #ffffff;

  /* Status */
  --status-error-bg: #fdecec; --status-error-text: #8e1f1f; --status-error-main: #d23c3c; --status-error-border: #f3b8b8;
  --status-warning-bg: #fff6df; --status-warning-text: #7a4d00; --status-warning-main: #e09a00; --status-warning-border: #f4d78a;
  --status-success-bg: #e7f6ec; --status-success-text: #1e6b3a; --status-success-main: #2f9e57; --status-success-border: #b6e2c5;
  --status-info-bg: #e8f0fb; --status-info-text: #1f4f8a; --status-info-main: #2f7fd6; --status-info-border: #b9d2f2;
  --status-error-dark: var(--status-error-text); --status-warning-dark: var(--status-warning-text);
  --status-success-dark: var(--status-success-text); --status-info-dark: var(--status-info-text);

  /* Nav */
  --topbar-height: 48px;
  --topbar-bg: rgba(255, 255, 255, 0.88);
  --drawer-width: 360px;
  --drawer-bg: #ffffff;
  --nav-text: var(--text-secondary);
  --nav-text-hover: var(--text-primary);
  --nav-active-bg: var(--surface-bg-alt);
  --nav-active-text: var(--text-primary);
  --nav-border: var(--border-color);

  /* Game accents (unchanged from the current tokens) */
  --game-iidx: #A12A5E; --game-popn: #ED0345; --game-pnm: #ED0345; --game-ddr: #017351; --game-sdvx: #710162;
  --game-jubeat: #FBBF45; --game-museca: #AAD962; --game-reflec: #03C383; --game-mga: #ff0000; --game-bishi: #EF6A32;
  --game-danevo: #3b7dd8; --game-nost: #6b5b95; --game-gitadora: #c8102e; --game-bst: #1ba1e2;
  --game-accent: var(--text-primary); /* set per page via body[data-game] */

  /* IIDX chart / lamp colours (used by .chart-* and .lamp-*) */
  --chart-b: #3aa655; --chart-n: #3d7fd9; --chart-h: #e39a00; --chart-a: #d9363e; --chart-l: #8a4fd3;
  --lamp-failed: #8b94a2; --lamp-assist: #a56bd8; --lamp-easy: #43b35b; --lamp-clear: #3d7fd9; --lamp-hard: #d9363e; --lamp-exhard: #d8a600; --lamp-fc: #17a2b8;

  /* Misc legacy names still referenced by components */
  --tooltip-bg: #1b1f26; --tooltip-text: #ffffff; --tooltip-border: #1b1f26;
  --slider-on-bg: #1f6fbf; --slider-on-border: #1f6fbf; --slider-off-bg: #d3d8e0; --slider-off-border: #d3d8e0; --slider-ball-bg: #ffffff;
  --alert-text: #e09a00;
  --btn-delete-border: #f3b8b8; --btn-delete-bg: #fdecec; --btn-delete-text: #a82626;
  --btn-active-border: var(--interactive-focus-ring); --btn-active-shadow: rgba(31, 111, 191, 0.25);
  --pill-border: var(--border-color); --pill-bg: var(--surface-bg-alt);
}

html[data-theme="dark"] {
  --page-bg: #0f1115;
  --surface-bg: #171a20;
  --surface-bg-alt: #1e222a;
  --surface-bg-raised: #222732;
  --surface-bg-sunken: #12151a;
  --surface-overlay: rgba(23, 26, 32, 0.85);
  --overlay-bg: rgba(0, 0, 0, 0.6);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-drawer: -12px 0 40px rgba(0, 0, 0, 0.6);

  --border-color: #2a3039;
  --border-color-light: #222831;
  --border-color-strong: #3b434f;

  --text-primary: #e7e9ee;
  --text-secondary: #a6adb9;
  --text-muted: #6f7885;
  --text-inverse: #0f1115;
  --text-link: #7db4ec;
  --text-link-hover: #a9cdf3;

  --interactive-bg: #1e222a;
  --interactive-bg-hover: #262b35;
  --interactive-bg-active: #2d333e;
  --interactive-border: #353c48;
  --interactive-focus-ring: #7db4ec;
  --control-fill: #e7e9ee;
  --control-fill-text: #0f1115;

  --status-error-bg: #3a1d1f; --status-error-text: #ffb4b4; --status-error-main: #e25c5c; --status-error-border: #5e2a2d;
  --status-warning-bg: #3a2e12; --status-warning-text: #ffd48a; --status-warning-main: #e8ac2b; --status-warning-border: #5c4a1c;
  --status-success-bg: #163224; --status-success-text: #9fe0b7; --status-success-main: #3fbf70; --status-success-border: #234d36;
  --status-info-bg: #16283f; --status-info-text: #a9cdf3; --status-info-main: #4f95e0; --status-info-border: #23405f;

  --topbar-bg: rgba(15, 17, 21, 0.85);
  --drawer-bg: #13161b;

  --tooltip-bg: #e7e9ee; --tooltip-text: #0f1115; --tooltip-border: #e7e9ee;
  --slider-on-bg: #7db4ec; --slider-on-border: #7db4ec; --slider-off-bg: #353c48; --slider-off-border: #353c48; --slider-ball-bg: #0f1115;
  --btn-delete-border: #5e2a2d; --btn-delete-bg: #3a1d1f; --btn-delete-text: #ffb4b4;
  --chart-n: #6aa3ee; --chart-h: #f0b53a; --chart-a: #ef6b72; --chart-l: #ad85e6; --chart-b: #5cc276;
  --lamp-clear: #6aa3ee; --lamp-hard: #ef6b72; --lamp-exhard: #f0c24a; --lamp-easy: #5cc276; --lamp-fc: #48c7dc; --lamp-assist: #bf8ff0;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; }
}

/* Per-page game accent: base.html sets <body data-game="iidx"> from the nav entry. */
body[data-game="iidx"] { --game-accent: var(--game-iidx); }
body[data-game="popn"], body[data-game="pnm"] { --game-accent: var(--game-popn); }
body[data-game="ddr"] { --game-accent: var(--game-ddr); }
body[data-game="sdvx"] { --game-accent: var(--game-sdvx); }
body[data-game="jubeat"] { --game-accent: var(--game-jubeat); }
body[data-game="museca"] { --game-accent: var(--game-museca); }
body[data-game="reflec"] { --game-accent: var(--game-reflec); }
body[data-game="mga"] { --game-accent: var(--game-mga); }
body[data-game="bishi"] { --game-accent: var(--game-bishi); }
body[data-game="danevo"] { --game-accent: var(--game-danevo); }
body[data-game="nost"] { --game-accent: var(--game-nost); }
body[data-game="gitadora"] { --game-accent: var(--game-gitadora); }
body[data-game="bst"] { --game-accent: var(--game-bst); }