/* 共通の配色。手動で選択するまでは端末の外観設定に追従します。 */
:root {
  color-scheme: light dark;
  --bg: #fafafa;
  --card: #ffffff;
  --surface: #f0f0f0;
  --hover: #e8e8e8;
  --ink: #1b1b1b;
  --muted: #686868;
  --line: #dcdcdc;
  --site-accent: var(--ink);
  --accent: var(--site-accent);
  --on-accent: #ffffff;
  --game: var(--ink);
  --tool: var(--ink);
  --app: var(--ink);
  --success: var(--muted);
  --warning: var(--ink);
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-display: "Arial", var(--font-body);
  --theme-disc-transform: rotate(0deg) scale(1);
  --theme-rays-opacity: 1;
  --theme-rays-transform: rotate(0deg) scale(1);
  --theme-cutout-transform: translate(0px, 0px);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #121212;
    --card: #181818;
    --surface: #202020;
    --hover: #2a2a2a;
    --ink: #ededed;
    --muted: #a3a3a3;
    --line: #353535;
    --on-accent: #121212;
    --theme-disc-transform: rotate(-12deg) scale(1.2);
    --theme-rays-opacity: 0;
    --theme-rays-transform: rotate(-45deg) scale(.6);
    --theme-cutout-transform: translate(-10px, 10px);
  }
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121212;
  --card: #181818;
  --surface: #202020;
  --hover: #2a2a2a;
  --ink: #ededed;
  --muted: #a3a3a3;
  --line: #353535;
  --on-accent: #121212;
  --theme-disc-transform: rotate(-12deg) scale(1.2);
  --theme-rays-opacity: 0;
  --theme-rays-transform: rotate(-45deg) scale(.6);
  --theme-cutout-transform: translate(-10px, 10px);
}

[data-category] {
  --product-accent: var(--ink);
  --category-accent: var(--ink);
}

@media print {
  :root, :root[data-theme], :root:not([data-theme]) {
    color-scheme: light;
    --bg: #ffffff;
    --card: #ffffff;
    --surface: #f0f0f0;
    --hover: #e8e8e8;
    --ink: #1b1b1b;
    --muted: #686868;
    --line: #dcdcdc;
    --on-accent: #ffffff;
  }
}