/* Homeschool Pro — Theme variables
 *
 * Three themes: SOFT (default, blush + sage), PRO (navy + coral), MIDNIGHT
 * (dark). Old ids from Bloom Academy ('blossom', 'neutral') are shown as Soft
 * by scripts/theme.js — nothing stored is rewritten.
 *
 * DATA COLOURS (--pal-*): subjects, students, calendar categories, attendance
 * statuses, badges etc. each store one of 12 original Bloom pastels. Those are
 * "palette keys", not colours to paint: utils.js tc()/tcSoft()/avatarStyle()
 * turn a stored key into the active theme's colour, so every chart, chip, bar
 * and dot follows the theme — Soft uses only rose, blush, sage, eucalyptus,
 * mauve and taupe. Per key:
 *   --pal-K       solid (bars, dots, borders, avatars) — ≥3:1 on the surface
 *   --pal-K-soft  tint for chips/badges behind dark text (--chip-ink, ≥6.7:1)
 *   --pal-K-ink   text on the solid (avatar initials)
 * Key names are the original pastel names (peach = #F6D1C1 …); see utils.js.
 */

/* ---------- SOFT (default) — blush + sage ---------- */
:root,
html[data-theme="soft"] {
  --color-primary: #F3DFDF;        /* blush highlight */
  --color-accent: #A0646A;         /* rose: buttons, today, active — white text 4.6:1 */
  --color-accent-hover: #8E5459;
  --color-accent-text: #94585C;    /* rose text on white/cream — 5.4:1 */
  --color-secondary: #8FAF94;      /* sage: progress, success */
  --color-depth: #4E6B54;          /* deep sage */
  --color-background: #FAF6F5;
  --color-surface: #FFFFFF;
  --color-surface-2: #FCF9F9;
  --color-surface-3: #F2E9E9;
  --color-text-primary: #2B2526;
  --color-text-secondary: #685D5F; /* 5.9:1 on cream */
  --color-text-muted: #71676C;     /* 4.6:1 on tinted panels, 5.1:1 on the page */
  --color-border: #EFE4E4;
  --color-border-strong: #DFD2D3;
  --color-success: #678C6D;
  --color-warning: #A08060;
  --color-danger: #A0545A;
  --color-info: #5F8F8A;
  --check-on: #678C6D;             /* checked box — white tick 3.8:1 */
  --chip-ink: #2B2526;

  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Nunito', system-ui, sans-serif;
  --heading-weight: 600;

  /* shell */
  --sidebar-bg: linear-gradient(180deg, #FFFFFF 0%, #F9EFEF 100%);
  --sidebar-border: #EFE1E1;
  --sidebar-ink: #564D4F;          /* 7.3:1 on the menu */
  --sidebar-group: #71676C;
  --sidebar-active-bg: #FFFFFF;
  --sidebar-active-ink: #7C4A4D;   /* 7.1:1 on the white pill */
  --sidebar-active-shadow: 0 1px 2px rgba(80,55,60,0.06), 0 4px 12px rgba(169,107,111,0.12);
  --brand-bg: linear-gradient(145deg, #E4B9BC, #A0646A);
  --brand-ink: #FFFFFF;
  --brand-radius: 50%;
  --topbar-bg: rgba(250,246,245,0.92);

  /* dashboard */
  --hero-bg: linear-gradient(118deg, #FBEDEE 0%, #F8F1EF 48%, #E8F0E9 100%);
  --hero-border: #F0E2E2;
  --hero-ink: var(--color-text-primary);
  --hero-sub: var(--color-text-secondary);
  --hero-track: rgba(160,100,106,0.14);
  --hero-chip-bg: rgba(255,255,255,0.78);
  --hero-chip-ink: var(--color-text-primary);
  --hero-chip-sub: var(--color-text-secondary);
  /* dashboard illustration (components/heroArt.js) */
  --art-1: #C4868C; --art-2: #8FAF94; --art-3: #EBCBCE; --art-4: #FFFDFB;
  --art-5: #5E7F64; --art-ink: #6B4A4E; --art-sun: rgba(255,255,255,0.75); --art-spark: #C4868C;
  --year-fill: linear-gradient(90deg, #9DBCA2, #C48D91);
  --today-bg: linear-gradient(160deg, #A86E73, #94585D);
  --today-ink: #FFFFFF;
  --today-shadow: 0 8px 18px rgba(169,107,111,0.32);
  --btn-primary-bg: linear-gradient(160deg, #A66A70, #9A5E63);
  --btn-primary-border: #9A5E63;
  --btn-primary-ink: #FFFFFF;
  --btn-primary-shadow: 0 4px 12px rgba(169,107,111,0.30);
  --fab-bg: linear-gradient(160deg, #C99195, #A0646A);
  --fab-shadow: 0 8px 22px rgba(169,107,111,0.40);
  --link: #94585C;

  --pal-peach:    #C47B84;  --pal-peach-soft:   #F3E5E6;  --pal-peach-ink: #2B2526;
  --pal-apricot:  #9C8572;  --pal-apricot-soft: #EBE7E3;  --pal-apricot-ink: #1A1617;
  --pal-butter:   #7F9363;  --pal-butter-soft:  #E5E9E0;  --pal-butter-ink: #1A1617;
  --pal-sage:     #4F7258;  --pal-sage-soft:    #DCE3DE;  --pal-sage-ink: #FFFFFF;
  --pal-sky:      #5F8F8A;  --pal-sky-soft:     #DFE9E8;  --pal-sky-ink: #1A1617;
  --pal-lavender: #8C6B7E;  --pal-lavender-soft: #E8E1E5;  --pal-lavender-ink: #FFFFFF;
  --pal-mauve:    #A88AA3;  --pal-mauve-soft:   #EEE8ED;  --pal-mauve-ink: #2B2526;
  --pal-taupe:    #8A8A84;  --pal-taupe-soft:   #E8E8E6;  --pal-taupe-ink: #1A1617;
  --pal-blush:    #BA858C;  --pal-blush-soft:   #F1E7E8;  --pal-blush-ink: #2B2526;
  --pal-rose:     #9E5F66;  --pal-rose-soft:    #ECDFE0;  --pal-rose-ink: #FFFFFF;
  --pal-leaf:     #6E9476;  --pal-leaf-soft:    #E2EAE4;  --pal-leaf-ink: #1A1617;
  --pal-depth:    #4E6B54;  --pal-depth-soft:   #DCE1DD;  --pal-depth-ink: #FFFFFF;
  --pal-stone:    #6E6B6D;  --pal-stone-soft:   #E2E1E2;  --pal-stone-ink: #FFFFFF;

  --confetti-1: #F3DFDF; --confetti-2: #A0646A; --confetti-3: #8FAF94; --confetti-4: #E4B9BC;
  --confetti-5: #5F8F8A; --confetti-6: #B87A80; --confetti-7: #DCE3DE; --confetti-8: #4E6B54;

  --shadow-sm: 0 1px 2px rgba(80,55,60,0.05), 0 6px 16px rgba(80,55,60,0.06);
  --shadow-md: 0 2px 6px rgba(80,55,60,0.07), 0 12px 28px rgba(80,55,60,0.09);
  --shadow-lg: 0 8px 24px rgba(80,55,60,0.09), 0 18px 36px rgba(80,55,60,0.06);

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-pill: 999px;
}

/* ---------- PRO — navy + coral + teal ---------- */
html[data-theme="pro"] {
  --color-primary: #FFE8E3;
  --color-accent: #E2513A;
  --color-accent-hover: #C9442F;
  --color-accent-text: #BC3F2A;    /* 4.7:1 on tinted panels */
  --color-secondary: #18A999;
  --color-depth: #18213D;
  --color-background: #F3F5FA;
  --color-surface: #FFFFFF;
  --color-surface-2: #F7F8FC;
  --color-surface-3: #ECEFF6;
  --color-text-primary: #141A2E;
  --color-text-secondary: #555E7B;
  --color-text-muted: #636B86;
  --color-border: #E5E8F1;
  --color-border-strong: #D2D7E5;
  --color-success: #13897C;
  --color-warning: #B7700A;
  --color-danger: #C9442F;
  --color-info: #2F7FD9;
  --check-on: #13897C;
  --chip-ink: #141A2E;

  --font-display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-num: 'Plus Jakarta Sans', system-ui, sans-serif;
  --heading-weight: 800;

  --sidebar-bg: linear-gradient(180deg, #18213D 0%, #1C2648 100%);
  --sidebar-border: transparent;
  --sidebar-ink: rgba(255,255,255,0.76);
  --sidebar-group: rgba(255,255,255,0.50);
  --sidebar-active-bg: rgba(255,255,255,0.10);
  --sidebar-active-ink: #FFFFFF;
  --sidebar-active-shadow: none;
  --brand-bg: linear-gradient(140deg, #F5B33F, #E2513A);
  --brand-ink: #FFFFFF;
  --brand-radius: 11px;
  --topbar-bg: rgba(255,255,255,0.94);

  --hero-bg: linear-gradient(115deg, #18213D 0%, #24305A 55%, #3A3F86 100%);
  --hero-ink: #FFFFFF;
  --hero-sub: rgba(255,255,255,0.80);
  --hero-track: rgba(255,255,255,0.18);
  --hero-border: transparent;
  --hero-chip-bg: rgba(255,255,255,0.12);
  --hero-chip-ink: #FFFFFF;
  --hero-chip-sub: rgba(255,255,255,0.80);
  --art-1: #F06A5B; --art-2: #18A999; --art-3: #F5B33F; --art-4: #FFFFFF;
  --art-5: #2F7FD9; --art-ink: #0B0F1C; --art-sun: rgba(255,255,255,0.10); --art-spark: #F5B33F;
  --year-fill: linear-gradient(90deg, #F5B33F, #E2513A);
  --today-bg: #18213D;
  --today-ink: #FFFFFF;
  --today-shadow: 0 10px 22px rgba(24,33,61,0.30);
  --btn-primary-bg: #18213D;
  --btn-primary-border: #18213D;
  --btn-primary-ink: #FFFFFF;
  --btn-primary-shadow: 0 6px 16px rgba(24,33,61,0.25);
  --fab-bg: linear-gradient(140deg, #FF8A72, #E2513A);
  --fab-shadow: 0 10px 24px rgba(226,81,58,0.42);
  --link: #C2412B;

  --pal-peach:    #DE7419;  --pal-peach-soft:   #FAE9DA;  --pal-peach-ink: #141A2E;
  --pal-apricot:  #A88310;  --pal-apricot-soft: #F1EBD9;  --pal-apricot-ink: #141A2E;
  --pal-butter:   #2FA86C;  --pal-butter-soft:  #DEF1E7;  --pal-butter-ink: #141A2E;
  --pal-sage:     #2F7FD9;  --pal-sage-soft:    #DEEBF9;  --pal-sage-ink: #0B0F1C;
  --pal-sky:      #8A57E8;  --pal-sky-soft:     #ECE4FB;  --pal-sky-ink: #FFFFFF;
  --pal-lavender: #DB4C8E;  --pal-lavender-soft: #F9E2ED;  --pal-lavender-ink: #0B0F1C;
  --pal-mauve:    #14A196;  --pal-mauve-soft:   #D9F0EE;  --pal-mauve-ink: #141A2E;
  --pal-taupe:    #717C98;  --pal-taupe-soft:   #E8EAEF;  --pal-taupe-ink: #0B0F1C;
  --pal-blush:    #F06A5B;  --pal-blush-soft:   #FDE7E5;  --pal-blush-ink: #141A2E;
  --pal-rose:     #E2513A;  --pal-rose-soft:    #FAE3DF;  --pal-rose-ink: #0B0F1C;
  --pal-leaf:     #13998B;  --pal-leaf-soft:    #D9EFEC;  --pal-leaf-ink: #141A2E;
  --pal-depth:    #18213D;  --pal-depth-soft:   #DADBE0;  --pal-depth-ink: #FFFFFF;
  --pal-stone:    #8A91A6;  --pal-stone-soft:   #ECEDF1;  --pal-stone-ink: #141A2E;

  --confetti-1: #E2513A; --confetti-2: #F5B33F; --confetti-3: #18A999; --confetti-4: #2F7FD9;
  --confetti-5: #8A57E8; --confetti-6: #DB4C8E; --confetti-7: #FFE8E3; --confetti-8: #18213D;

  --shadow-sm: 0 1px 2px rgba(20,26,46,0.04), 0 6px 18px rgba(20,26,46,0.06);
  --shadow-md: 0 2px 6px rgba(20,26,46,0.06), 0 14px 32px rgba(20,26,46,0.10);
  --shadow-lg: 0 8px 24px rgba(20,26,46,0.10), 0 18px 40px rgba(20,26,46,0.08);
}

/* ---------- MIDNIGHT — dark, rose + sage ---------- */
html[data-theme="midnight"] {
  --color-primary: #3A3733;
  --color-accent: #E0A3A8;
  --color-accent-hover: #EBB7BB;
  --color-accent-text: #EBB7BB;
  --color-secondary: #9DBA9F;
  --color-depth: #C3D6C5;
  --color-background: #1A1917;
  --color-surface: #252320;
  --color-surface-2: #2E2C29;
  --color-surface-3: #383532;
  --color-text-primary: #FBF7F2;
  --color-text-secondary: #E2DAD2;
  --color-text-muted: #BDB4AC;
  --color-border: #3F3B36;
  --color-border-strong: #524D47;
  --color-success: #9DBA9F;
  --color-warning: #E0BE87;
  --color-danger: #E0A39C;
  --color-info: #8FBDB7;
  --check-on: #9DBA9F;
  --chip-ink: #FBF7F2;

  --sidebar-bg: #201E1B;
  --sidebar-border: #3F3B36;
  --sidebar-ink: #E2DAD2;
  --sidebar-group: #BDB4AC;
  --sidebar-active-bg: #383532;
  --sidebar-active-ink: #FBF7F2;
  --sidebar-active-shadow: none;
  --brand-bg: linear-gradient(145deg, #EBB7BB, #B87A80);
  --brand-ink: #1A1917;
  --topbar-bg: rgba(26,25,23,0.92);

  --hero-bg: linear-gradient(118deg, #2C2624 0%, #272523 50%, #232825 100%);
  --hero-border: #3F3B36;
  --hero-ink: var(--color-text-primary);
  --hero-sub: var(--color-text-secondary);
  --hero-track: #3A3633;
  --hero-chip-bg: rgba(255,255,255,0.07);
  --hero-chip-ink: var(--color-text-primary);
  --hero-chip-sub: var(--color-text-secondary);
  --art-1: #D99BA0; --art-2: #92B396; --art-3: #6E5759; --art-4: #EDE6DE;
  --art-5: #5F7F65; --art-ink: #0E0D0C; --art-sun: rgba(255,255,255,0.05); --art-spark: #E0A3A8;
  --year-fill: linear-gradient(90deg, #9DBA9F, #E0A3A8);
  --today-bg: linear-gradient(160deg, #EBB7BB, #E0A3A8);
  --today-ink: #1A1917;
  --today-shadow: 0 8px 18px rgba(0,0,0,0.45);
  --btn-primary-bg: #E0A3A8;
  --btn-primary-border: #E0A3A8;
  --btn-primary-ink: #1A1917;
  --btn-primary-shadow: 0 4px 12px rgba(0,0,0,0.4);
  --fab-bg: linear-gradient(160deg, #EBB7BB, #E0A3A8);
  --fab-shadow: 0 8px 22px rgba(0,0,0,0.5);
  --link: #EBB7BB;

  --pal-peach:    #F3C9CC;  --pal-peach-soft:   #635554;  --pal-peach-ink: #1A1917;
  --pal-apricot:  #CDBBA3;  --pal-apricot-soft: #575147;  --pal-apricot-ink: #1A1917;
  --pal-butter:   #B9C99F;  --pal-butter-soft:  #515546;  --pal-butter-ink: #1A1917;
  --pal-sage:     #86B092;  --pal-sage-soft:    #424D42;  --pal-sage-ink: #1A1917;
  --pal-sky:      #8FBDB7;  --pal-sky-soft:     #45514D;  --pal-sky-ink: #1A1917;
  --pal-lavender: #B595AD;  --pal-lavender-soft: #50454A;  --pal-lavender-ink: #1A1917;
  --pal-mauve:    #EBC6DA;  --pal-mauve-soft:   #605458;  --pal-mauve-ink: #1A1917;
  --pal-taupe:    #A9A39E;  --pal-taupe-soft:   #4D4946;  --pal-taupe-ink: #1A1917;
  --pal-blush:    #F0CDD0;  --pal-blush-soft:   #625655;  --pal-blush-ink: #1A1917;
  --pal-rose:     #E0A3A8;  --pal-rose-soft:    #5D4949;  --pal-rose-ink: #1A1917;
  --pal-leaf:     #9DBA9F;  --pal-leaf-soft:    #495046;  --pal-leaf-ink: #1A1917;
  --pal-depth:    #C3D6C5;  --pal-depth-soft:   #545952;  --pal-depth-ink: #1A1917;
  --pal-stone:    #8C8A88;  --pal-stone-soft:   #44423F;  --pal-stone-ink: #1A1917;

  --confetti-1: #E0A3A8; --confetti-2: #9DBA9F; --confetti-3: #EBB7BB; --confetti-4: #8FBDB7;
  --confetti-5: #C9A6BC; --confetti-6: #B9C99F; --confetti-7: #C4B4AA; --confetti-8: #FBF7F2;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.45);
  --shadow-lg: 0 12px 28px rgba(0,0,0,0.55);
}

/* Midnight — badge variant overrides for legibility on dark surfaces */
html[data-theme="midnight"] .badge--success { background: rgba(157,186,159,0.22); color: #BEDABE; }
html[data-theme="midnight"] .badge--warning { background: rgba(224,190,135,0.22); color: #ECC78D; }
html[data-theme="midnight"] .badge--danger  { background: rgba(224,163,156,0.22); color: #EAB6AF; }
html[data-theme="midnight"] .badge--info    { background: rgba(168,198,224,0.20); color: #BCD3E8; }
html[data-theme="midnight"] #update-banner { color: #1A1917; }
html[data-theme="midnight"] #update-banner button { color: #1A1917; border-color: rgba(26,25,23,0.5); }
html[data-theme="midnight"] #update-banner button:hover { background: rgba(26,25,23,0.15); }
html[data-theme="midnight"] .skip-link { color: #1A1917; }
html[data-theme="midnight"] .modal-backdrop { background: rgba(0,0,0,0.55); }
html[data-theme="midnight"] .check.is-checked::after { border-color: #1A1917; }
html[data-theme="midnight"] .cal-day.today .cal-day__num { color: #1A1917; }

/* Pro — badges keep their meaning colours, tuned for the navy/coral set */
html[data-theme="pro"] .badge--success { background: #D9EFEC; color: #0F6E64; }
html[data-theme="pro"] .badge--warning { background: #F6EAD7; color: #8A5606; }
html[data-theme="pro"] .badge--danger  { background: #FAE3DF; color: #A8361F; }
html[data-theme="pro"] .badge--info    { background: #DEEBF9; color: #1F5FA8; }

/* Font scale (accessibility) */
html[data-font-scale="default"] { font-size: 16px; }
html[data-font-scale="larger"]  { font-size: 17.5px; }
html[data-font-scale="largest"] { font-size: 19px; }

/* Animations off (Settings → Appearance toggle) */
html[data-animations="off"] *,
html[data-animations="off"] *::before,
html[data-animations="off"] *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}
html[data-animations="off"] .card--interactive:hover { transform: none; }
html[data-animations="off"] .confetti { display: none !important; }