/* Final Chapter — 6 themes.
   Each theme sets 4 colours (from the brief), a heading font and a background texture.
   --c1 ink (darkest) · --c2 secondary ink · --c3 accent · --c4 paper (lightest).
   Everything else in the app derives from these tokens, so a theme is only this block. */

:root,
[data-theme="monochrome"] {
  --c1: #111111; --c2: #555555; --c3: #D6D6D2; --c4: #F4F4F2;
  --font-head: "Manrope", "Inter", system-ui, sans-serif;
  --head-weight: 800;
  /* graph paper */
  --pattern:
    linear-gradient(color-mix(in srgb, var(--c1) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--c1) 6%, transparent) 1px, transparent 1px);
  --pattern-size: 22px 22px;
}

[data-theme="cherry"] {
  --c1: #16131F; --c2: #4A3F4B; --c3: #C1A0AC; --c4: #F0D9E4;
  --font-head: "Playfair Display", Georgia, serif;
  --head-weight: 600;
  /* polka dots */
  --pattern: radial-gradient(color-mix(in srgb, var(--c4) 30%, white) 2.6px, transparent 3px);
  --pattern-size: 26px 26px;
}

[data-theme="aubergine"] {
  --c1: #301728; --c2: #6B3A5C; --c3: #B7D1EA; --c4: #EEF3F8;
  --font-head: "Lora", Georgia, serif;
  --head-weight: 700;
  /* bullet-journal dot grid */
  --pattern: radial-gradient(color-mix(in srgb, var(--c2) 26%, transparent) 1.2px, transparent 1.6px);
  --pattern-size: 20px 20px;
}

/* ---- styled themes: tokens here, component looks in styles.css ---- */

/* Scrapbook board: papers, polaroids and sticky notes pinned to a cork board */
[data-theme="scrapbook"] {
  --c1: #2B1D12; --c2: #6B5137; --c3: #D9BD8F; --c4: #FFFDF6;
  --font-head: "Special Elite", "Courier New", monospace;
  --head-weight: 400;
  /* real-looking cork: two layers of fine noise (dark and light grains) */
  --pattern:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='c'><feTurbulence type='fractalNoise' baseFrequency='1.15' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 .40  0 0 0 0 .24  0 0 0 0 .11  0 0 0 2.2 -1'/></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='l'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 .93  0 0 0 0 .78  0 0 0 0 .58  0 0 0 2.4 -1.25'/></filter><rect width='100%' height='100%' filter='url(%23l)'/></svg>");
  --pattern-size: 220px 220px, 180px 180px;
  --bg: #C69462; --surface: #FFFDF6; --surface-2: #F4E8CF;
}

/* Bullet journal: dot grid, black ink, highlighter */
[data-theme="bujo"] {
  --c1: #1C1C1C; --c2: #686868; --c3: #FFE36E; --c4: #FBF8F1;
  --font-head: "Caveat", "Comic Sans MS", cursive;
  --head-weight: 700;
  --pattern: radial-gradient(#C7C0B0 1.1px, transparent 1.4px);
  --pattern-size: 18px 18px;
  --bg: #FBF8F1; --surface: #FFFDF8; --surface-2: #FFF6CF;
}

/* Zine: newsprint, bold condensed headlines, hard black lines */
[data-theme="zine"] {
  --c1: #111111; --c2: #555555; --c3: #D8D4C8; --c4: #F4F2EC;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --head-weight: 700;
  --pattern: radial-gradient(#00000012 .8px, transparent 1px);
  --pattern-size: 4px 4px;
  --bg: #ECEBE6; --surface: #FFFFFF; --surface-2: #F1EFE8;
  --pop: #C8102E;
}

/* Varsity: navy, cream and gold, college-jacket stripes */
[data-theme="varsity"] {
  --c1: #1F2A44; --c2: #56607A; --c3: #E0B04C; --c4: #F3EAD3;
  --font-head: "Oswald", "Arial Narrow", sans-serif;
  --head-weight: 700;
  --pattern: repeating-linear-gradient(90deg, transparent 0 26px, color-mix(in srgb, var(--c1) 7%, transparent) 26px 28px);
  --pattern-size: auto;
  --bg: #F3EAD3; --surface: #FFFAF0; --surface-2: #F7EBCB;
  --pop: #B5333A;
}

/* Film: dark room, polaroid frames, film strips */
[data-theme="film"] {
  --c1: #F3EFE6; --c2: #B5ADA0; --c3: #FFD23F; --c4: #17161A;
  --font-head: "Playfair Display", Georgia, serif;
  --head-weight: 600;
  --pattern: radial-gradient(#FFFFFF0A 1px, transparent 1.4px);
  --pattern-size: 5px 5px;
  --bg: #17161A; --surface: #242229; --surface-2: #2E2B33;
  --line: #F3EFE61F; --line-strong: #F3EFE640;
  --shadow: 0 14px 30px -14px #000;
  color-scheme: dark;
}

/* ---------- derived tokens (shared by every theme) ----------
   :where() keeps these at zero specificity, so a theme block above can set its own --bg, --surface… */
:where(:root) {
  /* page tinted with the accent so white cards stand out; patterns still sit on top */
  --bg: color-mix(in srgb, var(--c3) 28%, var(--c4));
  --text: var(--c1);
  --muted: var(--c2);
  --accent: var(--c3);
  --on-accent: var(--c1);
  --primary: var(--c1);
  --on-primary: var(--c4);
  --surface: color-mix(in srgb, var(--c4) 18%, #fff);
  --surface-2: color-mix(in srgb, var(--c3) 22%, var(--c4));
  --line: color-mix(in srgb, var(--c1) 13%, transparent);
  --line-strong: color-mix(in srgb, var(--c1) 26%, transparent);
  --shadow: 0 1px 2px color-mix(in srgb, var(--c1) 8%, transparent), 0 10px 26px -14px color-mix(in srgb, var(--c1) 45%, transparent);
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;

  /* fine paper grain on top of every pattern */
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");

  /* Subject colours — identical in every theme (Хими is always pink, etc.). */
  --s-math: #C2413B;
  --s-physics: #6A4FB3;
  --s-chemistry: #D9468A;
  --s-biology: #2F8050;
  --s-mongolian: #2A5DB0;
  --s-english: #1E3A72;
  --s-russian: #C98A1E;
  --s-history: #7A4A2A;
  --s-society: #2E6E6A;
  --s-geography: #6E8B3D;
  --s-script: #3C4E8C;
}