/* Sakuga 2.0 ships dark-first; the site opens light and follows the viewer. Generated from tokens.json by compile_tokens.py. */
:root {
  --bg-canvas: var(--neutral-50);
  --bg-surface: var(--neutral-0);
  --bg-surface-raised: var(--neutral-100);
  --bg-surface-hover: var(--neutral-150);
  --bg-fill-subtle: var(--shade-a06);
  --bg-fill: var(--shade-a12);
  --bg-fill-selected: var(--shade-a08);
  --bg-glass: var(--glass-light-a62);
  --bg-glass-strong: var(--glass-light-a90);
  --bg-overlay: var(--shade-a40);
  --text-primary: var(--neutral-925);
  --text-secondary: var(--neutral-800);
  --text-muted: var(--neutral-600);
  --text-inverse: var(--neutral-0);
  --text-accent: var(--camellia-600);
  --border-hairline: var(--shade-a08);
  --border-divider: var(--shade-a12);
  --border-placeholder: var(--shade-a24);
  --border-control: var(--shade-a52);
  --border-glass: var(--white-a70);
  --highlight-glass: var(--white-a70);
  --action-primary: var(--neutral-925);
  --action-secondary: var(--shade-a12);
  --accent: var(--camellia-600);
  --accent-subtle: var(--camellia-600-a10);
  --on-accent: var(--neutral-0);
  --danger: var(--vermilion-600);
  --on-danger: var(--neutral-0);
  --text-danger: var(--vermilion-600);
  --progress-track: var(--shade-a16);
  --focus-ring: var(--neutral-925);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.7), 0 10px 30px rgba(11,10,16,0.12);
  --shadow-overlay: 0 18px 40px rgba(11,10,16,0.16);
  --shadow-portrait-ring: 0 0 0 2px rgba(11,10,16,0.1);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-canvas: var(--neutral-950);
    --bg-surface: var(--neutral-900);
    --bg-surface-raised: var(--neutral-875);
    --bg-surface-hover: var(--neutral-850);
    --bg-fill-subtle: var(--white-a08);
    --bg-fill: var(--white-a14);
    --bg-fill-selected: var(--white-a12);
    --bg-glass: var(--glass-dark-a42);
    --bg-glass-strong: var(--glass-dark-a82);
    --bg-overlay: var(--black-a50);
    --text-primary: var(--neutral-0);
    --text-secondary: var(--neutral-200);
    --text-muted: var(--neutral-400);
    --text-inverse: var(--neutral-925);
    --text-accent: var(--camellia-400);
    --border-hairline: var(--white-a06);
    --border-divider: var(--white-a12);
    --border-placeholder: var(--white-a22);
    --border-control: var(--white-a45);
    --border-glass: var(--white-a16);
    --highlight-glass: var(--white-a18);
    --action-primary: var(--neutral-0);
    --action-secondary: var(--white-a14);
    --accent: var(--camellia-400);
    --accent-subtle: var(--camellia-400-a14);
    --on-accent: var(--neutral-925);
    --danger: var(--vermilion-600);
    --on-danger: var(--neutral-0);
    --text-danger: var(--vermilion-400);
    --progress-track: var(--white-a28);
    --focus-ring: var(--neutral-0);
    --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 30px rgba(0,0,0,0.35);
    --shadow-overlay: 0 18px 40px rgba(0,0,0,0.6);
    --shadow-portrait-ring: 0 0 0 2px rgba(255,255,255,0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-canvas: var(--neutral-950);
  --bg-surface: var(--neutral-900);
  --bg-surface-raised: var(--neutral-875);
  --bg-surface-hover: var(--neutral-850);
  --bg-fill-subtle: var(--white-a08);
  --bg-fill: var(--white-a14);
  --bg-fill-selected: var(--white-a12);
  --bg-glass: var(--glass-dark-a42);
  --bg-glass-strong: var(--glass-dark-a82);
  --bg-overlay: var(--black-a50);
  --text-primary: var(--neutral-0);
  --text-secondary: var(--neutral-200);
  --text-muted: var(--neutral-400);
  --text-inverse: var(--neutral-925);
  --text-accent: var(--camellia-400);
  --border-hairline: var(--white-a06);
  --border-divider: var(--white-a12);
  --border-placeholder: var(--white-a22);
  --border-control: var(--white-a45);
  --border-glass: var(--white-a16);
  --highlight-glass: var(--white-a18);
  --action-primary: var(--neutral-0);
  --action-secondary: var(--white-a14);
  --accent: var(--camellia-400);
  --accent-subtle: var(--camellia-400-a14);
  --on-accent: var(--neutral-925);
  --danger: var(--vermilion-600);
  --on-danger: var(--neutral-0);
  --text-danger: var(--vermilion-400);
  --progress-track: var(--white-a28);
  --focus-ring: var(--neutral-0);
  --shadow-glass: inset 0 1px 0 rgba(255,255,255,0.18), 0 10px 30px rgba(0,0,0,0.35);
  --shadow-overlay: 0 18px 40px rgba(0,0,0,0.6);
  --shadow-portrait-ring: 0 0 0 2px rgba(255,255,255,0.12);
  color-scheme: dark;
}