/* Approved 2026-10-30: Dusty rose for the CRM and teacher PWA, light + dark.
   Supersedes the previous Lime choice. Original logo colors remain unchanged.
   Typography, density and status colors require separate component review. */
:root {
  --brand-black: #000000;
  --brand-white: #FFFFFF;
  --brand-pink: #F21D80;
  --neutral-25: #FCFBFC;
  --neutral-50: #F5F3F4;
  --neutral-100: #F0ECEF;
  --neutral-200: #DDD6DB;
  --neutral-400: #B6ACBA;
  --neutral-600: #69616B;
  --neutral-700: #47414A;
  --neutral-800: #2D292F;
  --neutral-825: #28262B;
  --neutral-850: #242126;
  --neutral-950: #19181B;
  --neutral-inverse: #EDE8EE;
  --rose-50: #F5E7ED;
  --rose-200: #E8ACC6;
  --rose-300: #DE93B3;
  --rose-600: #A6426C;
  --rose-700: #91385E;
  --rose-750: #83365A;
  --rose-900: #392733;
  --rose-950: #291D24;

  color-scheme: light;
  --color-page: var(--neutral-50);
  --color-surface: var(--neutral-25);
  --color-panel: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-text: var(--neutral-825);
  --color-muted: var(--neutral-600);
  --color-accent: var(--rose-600);
  --color-on-accent: var(--brand-white);
  --color-accent-subtle: var(--rose-50);
  --color-accent-text: var(--rose-700);
  --color-focus: var(--rose-750);

  --button-primary-bg: var(--color-accent);
  --button-primary-text: var(--color-on-accent);
  --lesson-selected-bg: var(--color-accent-subtle);
  --lesson-selected-border: var(--color-accent-text);
  --link-color: var(--color-accent-text);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-page: var(--neutral-950);
  --color-surface: var(--neutral-850);
  --color-panel: var(--neutral-800);
  --color-border: var(--neutral-700);
  --color-text: var(--neutral-inverse);
  --color-muted: var(--neutral-400);
  --color-accent: var(--rose-300);
  --color-on-accent: var(--rose-950);
  --color-accent-subtle: var(--rose-900);
  --color-accent-text: var(--rose-200);
  --color-focus: var(--rose-200);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --color-page: var(--neutral-950);
    --color-surface: var(--neutral-850);
    --color-panel: var(--neutral-800);
    --color-border: var(--neutral-700);
    --color-text: var(--neutral-inverse);
    --color-muted: var(--neutral-400);
    --color-accent: var(--rose-300);
    --color-on-accent: var(--rose-950);
    --color-accent-subtle: var(--rose-900);
    --color-accent-text: var(--rose-200);
    --color-focus: var(--rose-200);
  }
}