/* CSS 변수 — html[data-theme] 로 전환 */
:root {
  color-scheme: light;
}

html[data-theme="violet"] {
  color-scheme: light;
  --bg: #f4f3fc;
  --bg-elevated: #ffffff;
  --surface: #eeecfb;
  --text: #1a1740;
  --muted: #5b5880;
  --accent: #6366f1;
  --accent-hover: #4f46e5;
  --border: rgba(65, 55, 140, 0.12);
  --shadow: 0 12px 40px rgba(42, 35, 95, 0.08);
  --shadow-card: 0 4px 24px rgba(42, 35, 95, 0.06);
  --ring: rgba(99, 102, 241, 0.42);
  --placeholder: #e0dff5;
}

html[data-theme="cool"] {
  color-scheme: light;
  --bg: #f5f8fb;
  --bg-elevated: #ffffff;
  --surface: #f8fafc;
  --text: #1e293b;
  --muted: #64748b;
  --accent: #3b82a8;
  --accent-hover: #2d6b8c;
  --border: rgba(30, 58, 95, 0.12);
  --shadow: 0 12px 40px rgba(15, 45, 75, 0.08);
  --shadow-card: 0 4px 24px rgba(15, 45, 75, 0.06);
  --ring: rgba(59, 130, 168, 0.45);
  --placeholder: #e2e8f0;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121418;
  --bg-elevated: #1a1d24;
  --surface: #1e222b;
  --text: #e8eaef;
  --muted: #9aa3b2;
  --accent: #7eb8d4;
  --accent-hover: #9ecae0;
  --border: rgba(255, 255, 255, 0.08);
  --shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
  --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.35);
  --ring: rgba(126, 184, 212, 0.5);
  --placeholder: #3d4450;
}

/* 블루·보라 톤 페이지 배경 */
html[data-page="violet"] body {
  background: #000000;
  background-attachment: fixed;
  color: var(--text);
}

html[data-page="cool"] body {
  background: linear-gradient(
    168deg,
    #04080f 0%,
    #0a1522 22%,
    #0f2438 44%,
    #14324c 68%,
    #183d5c 100%
  );
  background-attachment: fixed;
  color: var(--text);
}

html[data-page="violet"] .footer,
html[data-page="violet"] .footer p {
  color: rgba(224, 220, 255, 0.78);
}

html[data-page="cool"] .footer,
html[data-page="cool"] .footer p {
  color: rgba(220, 235, 250, 0.75);
}