/* A prototype's page wears the mood of its game: one preset per palette of the series
   (tiktok/publish_strategy/visual-identity.md), set with "theme" in its proto.json.
   A proto.json can still override single colours with "colors" (bg, bg2, fg, accent, accentInk). */

[data-theme="neon-arcade"] {
  --bg: #0e0e1a; --bg-2: #1a1040; --fg: #eaf6ff; --muted: rgba(234, 246, 255, .66);
  --accent: #3ef0ff; --accent-2: #9ffaff; --accent-ink: #00252b; --alt: #ff386e;
  --surface: rgba(62, 240, 255, .06); --surface-2: rgba(62, 240, 255, .12); --line: rgba(62, 240, 255, .22);
}
[data-theme="neon-arcade"] body::after { background-image: linear-gradient(rgba(62, 240, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(62, 240, 255, .08) 1px, transparent 1px); background-size: 48px 48px; animation: none; opacity: .8; mask: linear-gradient(#000, transparent 85%); -webkit-mask: linear-gradient(#000, transparent 85%); }

[data-theme="candy-pastel"] {
  color-scheme: light; --mark-filter: brightness(.45) saturate(1.8); --stars: 0;
  --bg: #fff4e8; --bg-2: #ffe0f0; --fg: #35244f; --muted: rgba(53, 36, 79, .7);
  --accent: #7c5cff; --accent-2: #a58cff; --accent-ink: #fff; --alt: #ff6b8b;
  --surface: rgba(124, 92, 255, .09); --surface-2: rgba(124, 92, 255, .16); --line: rgba(53, 36, 79, .16);
  --shadow: 0 18px 44px rgba(124, 92, 255, .22); --focus: #7c5cff;
}
[data-theme="candy-pastel"] body::after { background: radial-gradient(circle at 20% 20%, #ff6b8b22 0 14px, transparent 15px), radial-gradient(circle at 70% 60%, #2ec4b622 0 18px, transparent 19px); background-size: 120px 120px, 160px 160px; animation: none; opacity: 1; }

[data-theme="mono-one"] {
  --bg: #111; --bg-2: #1c1c1c; --fg: #fff; --muted: rgba(255, 255, 255, .62); --stars: 0;
  --accent: #ff2d2d; --accent-2: #ff6a6a; --accent-ink: #fff;
  --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .12); --line: rgba(255, 255, 255, .2);
}

[data-theme="retro-crt"] {
  --bg: #081a08; --bg-2: #0d2a0d; --fg: #7dff7a; --muted: rgba(125, 255, 122, .65); --stars: 0;
  --accent: #ffde59; --accent-2: #fff0a3; --accent-ink: #1a1400; --alt: #7dff7a;
  --surface: rgba(125, 255, 122, .07); --surface-2: rgba(125, 255, 122, .14); --line: rgba(125, 255, 122, .3);
  --font-display: ui-monospace, "SF Mono", Menlo, Consolas, monospace; --radius: 6px;
}
[data-theme="retro-crt"] body { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; }
[data-theme="retro-crt"] body::after { background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px); animation: none; opacity: 1; z-index: 50; }
[data-theme="retro-crt"] h1, [data-theme="retro-crt"] h2 { text-shadow: 0 0 14px color-mix(in srgb, var(--fg) 60%, transparent); }
[data-theme="retro-crt"] .phone, [data-theme="retro-crt"] .btn, [data-theme="retro-crt"] .panel, [data-theme="retro-crt"] .chip { border-radius: 8px; }

[data-theme="toon-sunny"] {
  color-scheme: light; --mark-filter: brightness(.45) saturate(1.8); --stars: 0;
  --bg: #bfeaff; --bg-2: #5ec8ff; --fg: #0b2a4a; --muted: rgba(11, 42, 74, .7);
  --accent: #ff5a36; --accent-2: #ff8a6b; --accent-ink: #fff; --alt: #8a3ffc;
  --surface: rgba(255, 255, 255, .55); --surface-2: rgba(255, 255, 255, .8); --line: rgba(11, 42, 74, .18);
  --shadow: 0 18px 44px rgba(11, 42, 74, .25); --focus: #0b2a4a;
}

[data-theme="brutalist"] {
  color-scheme: light; --mark-filter: brightness(.45) saturate(1.8); --stars: 0;
  --bg: #f2f2f2; --bg-2: #f2f2f2; --fg: #000; --muted: rgba(0, 0, 0, .65);
  --accent: #ff4f00; --accent-2: #ff4f00; --accent-ink: #000; --alt: #0047ff;
  --surface: #fff; --surface-2: #e6e6e6; --line: #000; --radius: 0; --shadow: 8px 8px 0 #000; --focus: #0047ff;
}
[data-theme="brutalist"] body::before { background: var(--bg); }
[data-theme="brutalist"] body::after { display: none; }
[data-theme="brutalist"] .btn { border-radius: 0; box-shadow: 5px 5px 0 #000; border: 3px solid #000; background: var(--accent); }
[data-theme="brutalist"] .btn:active { box-shadow: 1px 1px 0 #000; transform: translate(4px, 4px); }
[data-theme="brutalist"] .btn.ghost { background: #fff; box-shadow: 5px 5px 0 #000; border: 3px solid #000; }
[data-theme="brutalist"] .panel, [data-theme="brutalist"] .card, [data-theme="brutalist"] .chip, [data-theme="brutalist"] .pager a, [data-theme="brutalist"] .crumbs a { border: 3px solid #000; border-radius: 0; box-shadow: 6px 6px 0 #000; }
[data-theme="brutalist"] .phone { border-radius: 0; box-shadow: 10px 10px 0 #000; animation: none; outline: 4px solid #000; }
[data-theme="brutalist"] .how li::before { border-radius: 0; background: var(--alt); color: #fff; }
[data-theme="brutalist"] h1 { text-transform: uppercase; }

[data-theme="lava"] {
  --bg: #1a0500; --bg-2: #4a1200; --fg: #ffe8c2; --muted: rgba(255, 232, 194, .68);
  --accent: #ff4500; --accent-2: #ff8a50; --accent-ink: #fff; --alt: #ffd000;
  --surface: rgba(255, 120, 40, .08); --surface-2: rgba(255, 120, 40, .16); --line: rgba(255, 150, 60, .3);
}

[data-theme="night-candy"] {
  --bg: #170a31; --bg-2: #3a1670; --fg: #fff; --muted: rgba(255, 255, 255, .7);
  --accent: #ffd23f; --accent-2: #ffe58a; --accent-ink: #2a1a00; --alt: #ff4fa3;
  --surface: rgba(255, 79, 163, .08); --surface-2: rgba(255, 79, 163, .16); --line: rgba(255, 210, 63, .26);
}

[data-theme="dice-den"] {
  --bg: #1c102c; --bg-2: #1d5a43; --fg: #fff3e0; --muted: rgba(255, 243, 224, .7);
  --accent: #ff8a1f; --accent-2: #ffb15c; --accent-ink: #2a1200; --alt: #1d8a5c;
  --surface: rgba(29, 138, 92, .18); --surface-2: rgba(29, 138, 92, .3); --line: rgba(255, 190, 120, .28);
}

[data-theme="shader-neon"] {
  --bg: #141418; --bg-2: #241238; --fg: #fff; --muted: rgba(255, 255, 255, .68);
  --accent: #ff2bd6; --accent-2: #ff7cea; --accent-ink: #fff; --alt: #3ef0ff;
  --surface: rgba(255, 255, 255, .06); --surface-2: rgba(255, 255, 255, .12); --line: rgba(255, 255, 255, .2);
}
[data-theme="shader-neon"] h1, [data-theme="shader-neon"] .vote-count .num, [data-theme="shader-neon"] .star-title {
  background: linear-gradient(100deg, #ff2bd6, #ffb400, #3ef0ff, #7c5cff, #ff2bd6); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: hue 8s linear infinite;
}
@keyframes hue { to { background-position: 300% 0; } }

[data-theme="storybook"] {
  --bg: #1b1b3a; --bg-2: #3a2a5a; --fg: #fff3dc; --muted: rgba(255, 243, 220, .72);
  --accent: #ff9a3c; --accent-2: #ffc07a; --accent-ink: #2a1400; --alt: #7fd6a2;
  --surface: rgba(255, 243, 220, .08); --surface-2: rgba(255, 243, 220, .15); --line: rgba(255, 243, 220, .22);
}