/* Общие роли цветов применяются к полям, панелям и обучению.
   --canvas намеренно остаётся собственностью настройки фона рисунка. */
:root {
  --field: #191c32; --button: #36394f; --selected: #49415f;
  --selected-text: #fff; --strong-line: #72718e; --track: #545775;
  --on-accent: #241b42; --scrim: #070917a8; --shadow: #0003;
}
:root[data-theme="paper"] {
  color-scheme: light; --page: #f2eee6; --panel: #fffdf8; --text: #292620;
  --muted: #625c52; --line: #d9d1c5; --accent: #7047a3; --pink: #9c3665;
  --field: #f6f1e9; --button: #e9e1d6; --selected: #e8dcf5;
  --selected-text: #41215f; --strong-line: #968978; --track: #aca093;
  --on-accent: #fff; --scrim: #29211db3; --shadow: #38271026;
}
:root[data-theme="ocean"] {
  color-scheme: dark; --page: #102b36; --panel: #173d49; --text: #e9f6f8;
  --muted: #accbd1; --line: #3e626c; --accent: #80d9e6; --pink: #ffc58b;
  --field: #102f3a; --button: #29525e; --selected: #326574;
  --selected-text: #fff; --strong-line: #719da7; --track: #5e8995;
  --on-accent: #10333d; --scrim: #061c24b8; --shadow: #0003;
}
:root[data-theme="forest"] {
  color-scheme: dark; --page: #182e26; --panel: #243e32; --text: #edf5e8;
  --muted: #bbcbb5; --line: #4c6450; --accent: #bed992; --pink: #edbf95;
  --field: #193126; --button: #36553f; --selected: #486844;
  --selected-text: #fff; --strong-line: #8ca17e; --track: #728565;
  --on-accent: #26341e; --scrim: #091b13b8; --shadow: #0003;
}
.primary, .notice { background: var(--accent); color: var(--on-accent); }
.secondary { background: var(--button); color: var(--text); }
.export-popover { border-color: var(--strong-line); box-shadow: 0 18px 45px var(--shadow); }
.settings-panel { box-shadow: -14px 0 45px var(--shadow); }
.settings-panel::backdrop { background: var(--scrim); }
.settings-tabs [aria-selected="true"], .segmented input:checked + span {
  background: var(--selected); color: var(--selected-text);
}
#spin-speed, .segmented, select { background: var(--field); border-color: var(--line); color: var(--text); }
#solid-color, .background-swatch { border-color: var(--strong-line); }
input[type="range"]::-webkit-slider-runnable-track { background: var(--track); }
input[type="range"]::-moz-range-track { background: var(--track); }
.color-stop input[type="color"]::-webkit-color-swatch { border-color: var(--strong-line); }
.color-stop input[type="color"]::-moz-color-swatch { border-color: var(--strong-line); }
.upload-control { border-color: var(--strong-line); color: var(--text); }
.drawer-scroll { scrollbar-color: var(--strong-line) transparent; }
.theme-options { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.theme-choice { position: relative; }
.theme-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-choice > span { display: flex; align-items: center; gap: 10px; padding: 12px 10px; min-height: 52px; cursor: pointer; border: 1px solid var(--strong-line); border-radius: 9px; }
.theme-choice b { font-size: 13px; font-weight: 400; }
.theme-choice i { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; background: linear-gradient(135deg, var(--sample-panel) 50%, var(--sample-accent) 50%); border: 1px solid var(--strong-line); }
.theme-choice input:checked + span { outline: 2px solid var(--accent); outline-offset: 1px; background: var(--selected); color: var(--selected-text); }
.theme-choice input:focus-visible + span { outline: 3px solid var(--pink); outline-offset: 3px; }
[data-palette="night"] { --sample-panel: #22253e; --sample-accent: #cec2ff; }
[data-palette="paper"] { --sample-panel: #fffdf8; --sample-accent: #7047a3; }
[data-palette="ocean"] { --sample-panel: #173d49; --sample-accent: #80d9e6; }
[data-palette="forest"] { --sample-panel: #243e32; --sample-accent: #bed992; }