:root {
  color-scheme: dark;

  --color-bg: #121018;
  --color-bg-elevated: #1c1824;
  --color-bg-card: #221e2c;
  --color-bg-card-hover: #2a2536;
  --color-border: #3a3448;
  --color-border-subtle: #2e2838;

  --color-text: #ece8f2;
  --color-text-muted: #9b93a8;
  --color-text-dim: #6e6678;

  --color-accent: #e85d8a;
  --color-accent-hover: #f07aa0;
  --color-accent-muted: rgba(232, 93, 138, 0.15);

  --color-sale: #ff6b4a;
  --color-sale-bg: rgba(255, 107, 74, 0.14);
  --color-new: #5ec98a;
  --color-new-bg: rgba(94, 201, 138, 0.14);
  --color-review: #7b9eff;
  --color-review-bg: rgba(123, 158, 255, 0.14);

  --color-warning: #f5c451;
  --color-warning-bg: rgba(245, 196, 81, 0.12);

  --font-sans: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-elevated: 0 8px 24px rgba(0, 0, 0, 0.35);

  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  --header-height: 3.25rem;
  --sidebar-width: 280px;
  --content-max: 1200px;

  --thumb-ratio: 3 / 4;
  --thumb-width-sm: 96px;
  --thumb-width-md: 140px;
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --color-bg: #f6f4f8;
    --color-bg-elevated: #ffffff;
    --color-bg-card: #ffffff;
    --color-bg-card-hover: #faf8fc;
    --color-border: #ddd6e4;
    --color-border-subtle: #ebe6f0;

    --color-text: #1a1520;
    --color-text-muted: #5c5468;
    --color-text-dim: #8a8296;

    --color-accent-muted: rgba(232, 93, 138, 0.1);
    --color-sale-bg: rgba(255, 107, 74, 0.1);
    --color-new-bg: rgba(94, 201, 138, 0.1);
    --color-review-bg: rgba(123, 158, 255, 0.1);
    --color-warning-bg: rgba(245, 196, 81, 0.15);

    --shadow-card: 0 1px 4px rgba(26, 21, 32, 0.08);
    --shadow-elevated: 0 4px 16px rgba(26, 21, 32, 0.12);
  }
}