/* theme.css — color tokens. Dark default; light via prefers-color-scheme or [data-theme=light].
 * Miku palette: teal #39C5BB (hair), white/gray (shirt), black (sleeves/skirt), red (hair ties/headset).
 * THEMING HOOK: character skins later override these tokens (and .avatar / .mascot). */
:root {
  --primary: #39C5BB;
  --primary-ink: #071a19;
  --primary-soft: rgba(57, 197, 187, .15);
  --accent: #F0405A;
  --accent-soft: rgba(240, 64, 90, .16);
  --bg: #0d0f11;
  --bg-2: #141719;
  --card: #1a1e21;
  --card-2: #22282b;
  --fg: #eef5f4;
  --fg-2: #a7b3b4;
  --fg-3: #6b7678;
  --line: #2a3134;
  --ok: #4fd38a;
  --warn: #f5b74a;
  --err: #ff7a45;
  --user-bubble: #167a72;
  --user-bubble-fg: #f1fffd;
  --assistant-bubble: #1a1e21;
  --tool-bg: #121517;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .3);
  --glow: rgba(57, 197, 187, .10);
  --radius: 16px;
  --radius-sm: 10px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Pretendard", "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "D2Coding", "JetBrains Mono", monospace;
  --tap: 44px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --primary: #17a69c;
    --primary-ink: #ffffff;
    --primary-soft: rgba(57, 197, 187, .16);
    --accent: #E0263F;
    --accent-soft: rgba(224, 38, 63, .10);
    --bg: #f5f8f8;
    --bg-2: #ffffff;
    --card: #ffffff;
    --card-2: #eef4f4;
    --fg: #16191b;
    --fg-2: #4d5759;
    --fg-3: #8a9496;
    --line: #dde5e6;
    --err: #e8590c;
    --user-bubble: #39C5BB;
    --user-bubble-fg: #06201e;
    --assistant-bubble: #ffffff;
    --tool-bg: #f3f6f6;
    --shadow: 0 8px 24px rgba(16, 40, 40, .10);
    --shadow-sm: 0 2px 8px rgba(16, 40, 40, .08);
    --glow: rgba(57, 197, 187, .14);
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --primary: #17a69c;
  --primary-ink: #ffffff;
  --primary-soft: rgba(57, 197, 187, .16);
  --accent: #E0263F;
  --accent-soft: rgba(224, 38, 63, .10);
  --bg: #f5f8f8;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-2: #eef4f4;
  --fg: #16191b;
  --fg-2: #4d5759;
  --fg-3: #8a9496;
  --line: #dde5e6;
  --err: #e8590c;
  --user-bubble: #39C5BB;
  --user-bubble-fg: #06201e;
  --assistant-bubble: #ffffff;
  --tool-bg: #f3f6f6;
  --shadow: 0 8px 24px rgba(16, 40, 40, .10);
  --shadow-sm: 0 2px 8px rgba(16, 40, 40, .08);
  --glow: rgba(57, 197, 187, .14);
  color-scheme: light;
}

/* ---------- skins (html[data-skin]) — accents only; light/dark stays from the theme ---------- */
:root[data-skin="snow"] { --primary: #6fc3ea; --primary-soft: rgba(111, 195, 234, .16); --accent: #3d8fd1; --accent-soft: rgba(61, 143, 209, .16); --glow: rgba(150, 210, 245, .14); --user-bubble: #2f7fae; }
:root[data-skin="sakura"] { --primary: #ef8db5; --primary-soft: rgba(239, 141, 181, .16); --accent: #d8406f; --accent-soft: rgba(216, 64, 111, .16); --glow: rgba(245, 160, 195, .14); --user-bubble: #b04a76; }
@media (prefers-color-scheme: light) {
  :root[data-skin="snow"]:not([data-theme="dark"]) { --primary: #2f8fc2; --primary-ink: #ffffff; --user-bubble: #9ad3f0; --user-bubble-fg: #0b2a3a; }
  :root[data-skin="sakura"]:not([data-theme="dark"]) { --primary: #d4558b; --primary-ink: #ffffff; --user-bubble: #f6b6d0; --user-bubble-fg: #3a0d20; }
}
:root[data-theme="light"][data-skin="snow"] { --primary: #2f8fc2; --primary-ink: #ffffff; --user-bubble: #9ad3f0; --user-bubble-fg: #0b2a3a; }
:root[data-theme="light"][data-skin="sakura"] { --primary: #d4558b; --primary-ink: #ffffff; --user-bubble: #f6b6d0; --user-bubble-fg: #3a0d20; }