/*
 * The three Choosy Goosy looks (style.css / ui/theme/Color.kt): Pond, Midnight Goose, Neon night.
 * theme.js sets data-theme and stores "cg-theme", so the studio and the product pages share one choice.
 * Dark looks swap white surfaces for feather tones, drop hard ink outlines for a quiet line and dim the
 * painted scenery like the product pond's --scene-filter.
 */
.theme-picker { --feather: #fff; --line: #1F2A44; --pond: #E8F4EF; --ink-soft: #4A5672; --grass: #1C7A50; --beak-text: #C25210; --lift: 0 2px 8px #1f2a441a; }
.studio-header .theme-toggle { width: 44px; height: 44px; background: #fff; }
.studio-header .theme-toggle:hover { background: #ffe6cf; color: var(--ink); }

html[data-theme=midnight] {
  --paper: #070B0C; --ink: #E8F2F0; --muted: #AEC4C1; --line: #2C4A4E; --orange: #F0B06A;
  --action: #3DE0D2; --on-action: #070B0C; --action-hover: #6BE9DE;
  --surface: #142022; --surface-pick: #234842; --scene-filter: brightness(.62) saturate(.85);
  color-scheme: dark;
}
html[data-theme=midnight][data-audience=kids] { --paper: #080C12; }
html[data-theme=neon] {
  --paper: #100C2C; --ink: #FAF8FF; --muted: #CEC8F2; --line: #4B3E9E; --orange: #FF85C0;
  --action: #D4FF6B; --on-action: #100C2C; --action-hover: #E2FF9A;
  --surface: #241C58; --surface-pick: #46308A; --scene-filter: brightness(.66) saturate(.9);
  color-scheme: dark;
}
html[data-theme=neon][data-audience=kids] { --paper: #140E36; }
html[data-theme] .theme-picker, html[data-theme] .studio-language { --feather: var(--surface); --pond: var(--paper); --yolk-pale: var(--surface-pick); --ink-soft: var(--muted); --grass: var(--action); --beak-text: var(--orange); --lift: 0 2px 10px #0006; }
html[data-theme=midnight] .theme-picker, html[data-theme=midnight] .studio-language { --line: #2C4A4E; }
html[data-theme=neon] .theme-picker, html[data-theme=neon] .studio-language { --line: #4B3E9E; }

html[data-theme] body { background: var(--paper); }
html[data-theme] .world-backdrop { filter: var(--scene-filter); }
html[data-theme] .skip,
html[data-theme] .studio-header nav>a,
html[data-theme] .studio-language summary,
html[data-theme] .studio-header .theme-toggle,
html[data-theme] .audience-buttons,
html[data-theme] .app-card,
html[data-theme] .kids-badge,
html[data-theme] .showcase-shell{ background: var(--surface); border-color: var(--line); }
html[data-theme] .studio-header nav>a:hover,
html[data-theme] .studio-language summary:hover,
html[data-theme] .studio-language[open] summary,
html[data-theme] .studio-header .theme-toggle:hover,
html[data-theme] .audience-buttons>button:hover,
html[data-theme] .status,
html[data-theme] .topic-list li { background: var(--surface-pick); color: var(--ink); }
html[data-theme] .audience-thumb { border-color: var(--action); }
html[data-theme] .audience-buttons>button[aria-pressed=true] { color: var(--on-action); }
html[data-theme] .button { background: var(--action); color: var(--on-action); border-color: var(--action); }
html[data-theme] .button:hover { background: var(--action-hover); }
html[data-theme] .speech-outline path { fill: var(--surface); stroke: var(--line); }
html[data-theme] .app-grid[data-family=apps] .choosy-card { background: linear-gradient(110deg, color-mix(in srgb, #FFD45C 16%, var(--surface)) 0%, var(--surface) 70%); }
html[data-theme] .polish-card { background: color-mix(in srgb, #FFB27A 14%, var(--surface)); }
html[data-theme] .math-card { background: color-mix(in srgb, #B9A2E8 16%, var(--surface)); }
html[data-theme] .showcase-shell { --world: var(--paper); }
html[data-theme] .showcase-stage { background: radial-gradient(ellipse at center, var(--surface-pick), var(--world)); }
html[data-theme] .construction-art { background: color-mix(in srgb, #FFB27A 14%, var(--surface)); }
html[data-theme] .construction-art[data-app=matma] { background: color-mix(in srgb, #B9A2E8 16%, var(--surface)); }