/* Themes, keyed by data-theme on <html> (set by theme.js, and before first paint by a line in index.html).
   plain is the :root of index.html; a theme overrides its colour variables and, for notebook, the shape of the
   practice box and the word tape. Remove a theme by deleting its block here and its option in lessons.js. */

/* notebook: a 漢字練習帳 box (square, dotted cross and diagonals, blue-grey rules on cream) and a 原稿用紙 tape
   (touching squares, a double rule under each line of text) */
:root[data-theme=notebook] { --paper: #fbf7ec; --card: #fffdf6; --line: #d3dbe4; --rule: #9fb6cf; --ghost: #c3cedb; --ghost-faint: #e7edf4; --accent: #2f5fb3; }
[data-theme=notebook] #board { border-radius: 0; border: 1.5px solid var(--rule); }
[data-theme=notebook] #grid line { stroke: var(--rule); stroke-dasharray: 1.5 1.5; }
[data-theme=notebook] #grid .diag { display: inline; stroke-dasharray: 1 2.5; opacity: .55; }
[data-theme=notebook] #tape { gap: 0; padding: 0 1px 1px 0; }
[data-theme=notebook] .cell, [data-theme=notebook] .gap { width: 2.4rem; height: 2.4rem; border-radius: 0; border: 1px solid var(--rule); border-bottom: 3px double var(--rule); margin: 0 -1px -1px 0; background: var(--card); }
[data-theme=notebook] .cell.current { box-shadow: 0 0 0 2px var(--accent) inset; }
[data-theme=notebook] #model, [data-theme=notebook] #anim, [data-theme=notebook] .glyphs svg, [data-theme=notebook] .choices button { border-radius: 0; border-color: var(--rule); }

/* dark */
:root[data-theme=dark] { color-scheme: dark; --paper: #17160f; --card: #23211a; --ink: #ece6d6; --muted: #9b9484; --line: #3b382f; --rule: #3b382f; --ghost: #5a564a; --ghost-faint: #2f2d25;
  --learned: #203a2c; --mastered: #2c5a40; --badbg: #4a2320; --accent: #6c86f5; --ok: #4fc17f; --warn: #e8a63a; --bad: #ef6b6b; }
[data-theme=dark] input, [data-theme=dark] select { color: var(--ink); }
[data-theme=dark] #mnemo img { filter: brightness(.9); }