/* Brand colours copied from Платформа Ёшкола/static/css/tokens.css.
   Keep layout and type in app/domain styles; both schemes use these aliases. */
:root {
  --theme-choice-yoshkola: #145ddd;
  --theme-choice-vibe: #1e6654;
  --vibe-paper: #f5f7f6;
  --vibe-surface: #ffffff;
  --vibe-sand: #eef3f1;
  --vibe-ink: #17231f;
  --vibe-muted: #64726d;
  --vibe-brand-900: #123c32;
  --vibe-palm-100: #e5f2ed;
  --vibe-palm-600: #1e6654;
  --vibe-palm-700: #174f42;
  --vibe-ocean: #75c6c4;
  --vibe-sun: #f5c84c;
  --vibe-coral: #ef8f72;
  --vibe-coral-100: #f7e2db;
  --vibe-palm-rgb: 30 102 84;
  --vibe-ink-rgb: 23 35 31;
  --vibe-white-rgb: 255 255 255;
  --vibe-shadow-rgb: 0 0 0;

  /* Parent and learner portals keep a calmer canvas than the operational
     backoffice. These aliases isolate learning from backoffice palette edits. */
  --portal-page-bg: #fffdf8;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f7f1e7;

  color-scheme: light;
  --ink: var(--vibe-ink);
  --muted: var(--vibe-muted);
  --primary: var(--vibe-palm-600);
  --primary-hover: var(--vibe-palm-700);
  --primary-soft: var(--vibe-palm-100);
  --primary-subtle: color-mix(in srgb, var(--primary-soft) 45%, var(--surface));
  --primary-line: color-mix(in srgb, var(--primary) 42%, var(--surface));
  --paper: var(--portal-page-bg);
  --surface: var(--portal-surface);
  --surface-soft: var(--portal-surface-soft);
  --surface-hover: var(--primary-subtle);
  --line: rgb(var(--vibe-ink-rgb) / .12);
  --line-strong: rgb(var(--vibe-ink-rgb) / .28);
  --focus: var(--primary);
  --on-primary: var(--vibe-surface);
  --accent: var(--vibe-coral);
  --accent-soft: var(--vibe-coral-100);
  --accent-ink: #91462e;
  --accent-line: color-mix(in srgb, var(--accent) 55%, var(--surface));
  --sun: var(--vibe-sun);
  --sun-soft: #fffbeb;
  --sun-ink: #92400e;
  --sun-line: #fde68a;
  --ocean: var(--vibe-ocean);
  --ocean-soft: color-mix(in srgb, var(--ocean) 16%, var(--surface));
  --ocean-ink: color-mix(in srgb, var(--ocean) 30%, var(--ink));
  --success: #166534;
  --success-soft: #f0fdf4;
  --success-line: #bbf7d0;
  --danger: #b91c1c;
  --danger-soft: #fff1f2;
  --danger-line: #fecdd3;
  --info: #1e40af;
  --info-soft: #eff6ff;
  --info-line: #93c5fd;
  --shadow-color: rgb(var(--vibe-ink-rgb) / .05);
  --primary-shadow: rgb(var(--vibe-palm-rgb) / .13);
  --soft: var(--primary-soft);
  --green: var(--primary);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-text-soft: var(--ink);
  --color-surface: var(--surface);
  --color-surface-soft: var(--surface-soft);
  --color-border: var(--line);
  --color-border-strong: var(--line-strong);
  --color-primary-50: var(--primary-subtle);
  --color-primary-100: var(--primary-soft);
  --color-primary-300: var(--primary-line);
  --color-primary-500: var(--primary);
  --color-primary-600: var(--primary);
  --color-primary-700: var(--primary-hover);
  --color-secondary-50: var(--accent-soft);
  --color-secondary-300: var(--accent-line);
  --color-secondary-600: var(--accent-ink);
  --color-success-600: var(--success);
  --color-danger-500: var(--danger);
  --radius-md: 12px;
}
:root:not([data-theme="vibe"]) {
  --vibe-paper: #fffbfb;
  --vibe-surface: #ffffff;
  --vibe-sand: #e3e9f8;
  --vibe-ink: #011c4c;
  --vibe-muted: #52627d;
  --vibe-brand-900: #011c4c;
  --vibe-palm-100: #e3e9f8;
  --vibe-palm-600: #145ddd;
  --vibe-palm-700: #0d47ad;
  --vibe-ocean: #33c540;
  --vibe-sun: #ffce24;
  --vibe-coral: #f2299a;
  --vibe-coral-100: #fde1f1;
  --vibe-palm-rgb: 20 93 221;
  --vibe-ink-rgb: 1 28 76;
  --vibe-white-rgb: 255 255 255;
  --vibe-shadow-rgb: 1 28 76;
  --portal-page-bg: #fffbfb;
  --portal-surface: #ffffff;
  --portal-surface-soft: #f5f7ff;
}
:root:not([data-theme="vibe"]) {
  --accent-ink: #a51365;
}

/* Palette preference is separate from pupils' work and progress. */
.theme-picker[hidden] { display: none !important; }
.theme-picker { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 10px 20px; }
.theme-picker-label { display: block; color: var(--muted); font-size: 16px; }
.theme-switch { position: relative; display: inline-flex; flex: 0 0 64px; align-items: center; justify-content: space-between; width: 64px; height: 44px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 24px; background: var(--surface-soft); cursor: pointer; }
.theme-switch:hover { border-color: var(--primary); }
.theme-switch:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-switch-thumb { position: absolute; inset: 7px auto 7px 3px; width: 28px; border-radius: 50%; background: var(--surface); border: 2px solid var(--theme-choice-yoshkola); box-shadow: 0 1px 4px var(--shadow-color); transition: transform .15s; }
.theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(28px); border-color: var(--theme-choice-vibe); }
.theme-switch .theme-dot { position: relative; width: 12px; height: 12px; }
.theme-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* Older standalone workshop exports may still contain two theme buttons. */
.theme-options { display: flex; flex-wrap: wrap; gap: 8px; }
.theme-option { display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex: 1; min-height: 46px; padding: 10px 8px; border: 1px solid var(--line-strong); border-radius: 11px; background: var(--surface); color: var(--ink); font: 600 17px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; cursor: pointer; }
.theme-option:hover { background: var(--surface-hover); }
.theme-option[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--primary); color: var(--primary-hover); box-shadow: inset 0 0 0 1px var(--primary); }
.theme-option:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.theme-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.theme-dot-vibe { background: var(--theme-choice-vibe); }
.theme-dot-yoshkola { background: var(--theme-choice-yoshkola); }
@media (prefers-reduced-motion: reduce) { .theme-switch-thumb { transition: none; } }
@media print { .theme-picker { display: none; } }