/* ============================================================
   Ryn's Academy — shared brand stylesheet (single source of truth)
   Kit: Canva "Ryn's Academy" (kAHYBSECMXg), approved Oct 14, 2026.
   Deployed at: https://academy.noshwithmikki.com/assets/academy-theme.css

   Pages and apps LINK this file and set data-subject on their root
   element (homepage root: data-subject="academy"; each lesson page
   and app: its own subject). To change any brand color later, edit
   ONLY this file — every linked page/app follows.

   Subjects (site nav order):
     math    Math          #E50000
     hebrew  Hebrew        #FF8D00
     reading Reading       #FFEE00
     science Science       #028121
     life    Life Science  #004CFF
     dutch   Dutch         #5B5BD6
   Base brand: Academy Purple #770088. Neutrals: Warm Cream #FFFDF6,
   Ink #33343D. Fonts: Fredoka (headings), Nunito (body).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

:root {
  /* Brand constants */
  --academy: #770088;
  --math: #E50000;
  --hebrew: #FF8D00;
  --reading: #FFEE00;
  --science: #028121;
  --life: #004CFF;
  --dutch: #5B5BD6;
  --cream: #FFFDF6;
  --ink: #33343D;

  /* Soft tints (backgrounds, chips) derived from the constants */
  --academy-tint: color-mix(in srgb, var(--academy) 12%, white);
  --math-tint: color-mix(in srgb, var(--math) 12%, white);
  --hebrew-tint: color-mix(in srgb, var(--hebrew) 16%, white);
  --reading-tint: color-mix(in srgb, var(--reading) 22%, white);
  --science-tint: color-mix(in srgb, var(--science) 12%, white);
  --life-tint: color-mix(in srgb, var(--life) 10%, white);
  --dutch-tint: color-mix(in srgb, var(--dutch) 12%, white);

  /* Darker shades (text on tints, borders) */
  --academy-dark: color-mix(in srgb, var(--academy) 72%, black);
  --math-dark: color-mix(in srgb, var(--math) 72%, black);
  --hebrew-dark: color-mix(in srgb, var(--hebrew) 68%, black);
  --reading-dark: color-mix(in srgb, var(--reading) 55%, black);
  --science-dark: color-mix(in srgb, var(--science) 72%, black);
  --life-dark: color-mix(in srgb, var(--life) 72%, black);
  --dutch-dark: color-mix(in srgb, var(--dutch) 72%, black);

  /* Fonts */
  --font-head: 'Fredoka', 'Comic Sans MS', 'Chalkboard SE', ui-rounded, system-ui, sans-serif;
  --font-body: 'Nunito', system-ui, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* Active subject defaults to the base brand until data-subject is set */
  --subject: var(--academy);
  --subject-tint: var(--academy-tint);
  --subject-dark: var(--academy-dark);
  --on-subject: #fff; /* text color that sits ON --subject */
}

/* Per-subject activation. Reading yellow is the one subject whose
   on-color must be ink, not white (contrast). */
[data-subject="academy"] { --subject: var(--academy); --subject-tint: var(--academy-tint); --subject-dark: var(--academy-dark); --on-subject: #fff; }
[data-subject="math"]    { --subject: var(--math);    --subject-tint: var(--math-tint);    --subject-dark: var(--math-dark);    --on-subject: #fff; }
[data-subject="hebrew"]  { --subject: var(--hebrew);  --subject-tint: var(--hebrew-tint);  --subject-dark: var(--hebrew-dark);  --on-subject: #fff; }
[data-subject="reading"] { --subject: var(--reading); --subject-tint: var(--reading-tint); --subject-dark: var(--reading-dark); --on-subject: var(--ink); }
[data-subject="science"] { --subject: var(--science); --subject-tint: var(--science-tint); --subject-dark: var(--science-dark); --on-subject: #fff; }
[data-subject="life"]    { --subject: var(--life);    --subject-tint: var(--life-tint);    --subject-dark: var(--life-dark);    --on-subject: #fff; }
[data-subject="dutch"]   { --subject: var(--dutch);   --subject-tint: var(--dutch-tint);   --subject-dark: var(--dutch-dark);   --on-subject: #fff; }

/* Small helpers for elements that wear the active subject color */
.u-subject-bg   { background: var(--subject); color: var(--on-subject); }
.u-subject-tint { background: var(--subject-tint); }
.u-subject-text { color: var(--subject-dark); }
.u-academy-bg   { background: var(--academy); color: #fff; }