/* Shared theme system used by every page: color variables per theme (layout and component
   styling lives in static/app.css). The active theme is a per-teacher setting
   (teachers.theme, changed on Settings > Загальні) rendered server-side as
   data-theme on <html> - see themeCatalog in handlers/admin.go. */

:root[data-theme="rose"] {
  --c50: #fff1f2; --c100: #ffe4e6; --c150: #ffd9dd; --c200: #fecdd3; --c300: #fda4af; --c600: #be123c; --c800: #9f1239; --c900: #881337;
}
:root[data-theme="ocean"] {
  --c50: #f0f9ff; --c100: #e0f2fe; --c150: #cdecfe; --c200: #bae6fd; --c300: #7dd3fc; --c600: #0284c7; --c800: #075985; --c900: #0c4a6e;
}
:root[data-theme="forest"] {
  --c50: #f0fdf4; --c100: #dcfce7; --c150: #ccfadc; --c200: #bbf7d0; --c300: #86efac; --c600: #16a34a; --c800: #166534; --c900: #14532d;
}
:root[data-theme="violet"] {
  --c50: #f5f3ff; --c100: #ede9fe; --c150: #e5e0fe; --c200: #ddd6fe; --c300: #c4b5fd; --c600: #7c3aed; --c800: #5b21b6; --c900: #4c1d95;
}
:root[data-theme="amber"] {
  --c50: #fffbeb; --c100: #fef3c7; --c150: #feeda9; --c200: #fde68a; --c300: #fcd34d; --c600: #d97706; --c800: #92400e; --c900: #78350f;
}
:root[data-theme="teal"] {
  --c50: #f0fdfa; --c100: #ccfbf1; --c150: #b3f9eb; --c200: #99f6e4; --c300: #5eead4; --c600: #0d9488; --c800: #115e59; --c900: #134e4a;
}
:root[data-theme="indigo"] {
  --c50: #eef2ff; --c100: #e0e7ff; --c150: #d4ddff; --c200: #c7d2fe; --c300: #a5b4fc; --c600: #4f46e5; --c800: #3730a3; --c900: #312e81;
}
:root[data-theme="slate"] {
  --c50: #f8fafc; --c100: #f1f5f9; --c150: #eaeff5; --c200: #e2e8f0; --c300: #cbd5e1; --c600: #475569; --c800: #1e293b; --c900: #0f172a;
}
:root,
:root[data-theme="magenta"] {
  --c50: #fdf2f8; --c100: #fce7f3; --c150: #fcdbee; --c200: #fbcfe8; --c300: #f9a8d4; --c600: #db2777; --c800: #9d174d; --c900: #831843;
}
:root[data-theme="brown"] {
  --c50: #fbf7f4; --c100: #f2e4d3; --c150: #e9d4be; --c200: #e0c4a8; --c300: #c99b6b; --c600: #7c4a24; --c800: #5c3317; --c900: #3d2211;
}

:root {
  --accent: var(--c600);
  --accent-hover: var(--c800);
  --accent-dark: var(--c800);
  --accent-darker: var(--c900);
  --accent-border: var(--c200);
  --accent-border-mid: var(--c300);
  --accent-bg: var(--c50);
  --page-bg: #f4f5f7;

  /* Calendar lesson slots: completed uses the deeper mid tone, booked/pending the pale one. */
  --lesson-pending-bg: var(--c50);
  --lesson-pending-border: var(--c200);
  --lesson-pending-text: var(--c600);
  --lesson-completed-bg: var(--c150);
  --lesson-completed-border: var(--c200);
  --lesson-completed-text: var(--c900);
}

/* Shows a timezone line under a page title (student/family public pages; admin pages show
   it in the top bar instead). */
.header-timezone { font-size: 0.8rem; color: #6b7280; margin: -0.75rem 0 1.25rem; }

/* Theme swatches on the Settings > Загальні panel (replaces the old floating picker). */
.theme-swatch-picker { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 1rem; }
.theme-swatch-option {
  width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.15); cursor: pointer; padding: 0;
}
.theme-swatch-option:hover { box-shadow: 0 0 0 1px rgba(0,0,0,0.3); }
.theme-swatch-option.active { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--accent-dark); }