/* Mycelium reader themes (Chris chose these on 2026-09-29).
 *
 * Seven themes on one layout. A theme is only colours and a typeface: each block maps onto the tokens every Lens
 * view already uses (--void, --ink, --thread, …) plus the layout's own (--accent*, --edge, --ring, --shadow,
 * --font-ui). Aizome is the default; Kon follows a device set to dark. Kawaraban carries the earlier site's paper
 * colours and EB Garamond; the other six use Zen Maru Gothic.
 * tests/test_brand.py holds every theme to WCAG 2.2 AA: text 4.5:1, borders and marks 3:1.
 * lens/theme.js lists the same themes for the picker; keep the two in step.
 */

:root[data-theme="aizome"] {
  color-scheme: light;
  --void: #F4EEE3;
  --substrate: #EDE5D7;
  --surface: #FBF8F2;
  --surface-raised: #FFFFFF;
  --hairline: #DDD3C4;
  --ink: #2A2724;
  --ink-2: #55504A;
  --ink-3: #665F57;
  --thread: #83540A;
  --thread-glow: #83540A2e;
  --hypha: #2F4B6E;
  --hypha-dim: #2F4B6E1f;
  --tension: #A3243F;
  --contested: #5B47A8;
  --tolerated: #94460F;
  --yields: #9A9185;
  --accent: #2F4B6E;
  --on-accent: #FFFFFF;
  --accent-tint: #E6ECF3;
  --accent-2: #566236;
  --on-accent-2: #FFFFFF;
  --accent-2-tint: #ECEFE2;
  --accent-3: #A94B22;
  --on-accent-3: #FFFFFF;
  --accent-3-tint: #F8E7DC;
  --edge: #81786D;
  --ring: #81786D;
  --shadow: 0 18px 40px -26px rgba(70,50,30,0.42);
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

:root[data-theme="sakura"] {
  color-scheme: light;
  --void: #F9ECEC;
  --substrate: #F2E2E2;
  --surface: #FFF8F7;
  --surface-raised: #FFFFFF;
  --hairline: #E8D3D3;
  --ink: #2B2226;
  --ink-2: #57484D;
  --ink-3: #665559;
  --thread: #83540A;
  --thread-glow: #83540A2e;
  --hypha: #2F5E6B;
  --hypha-dim: #2F5E6B1f;
  --tension: #A3243F;
  --contested: #5B47A8;
  --tolerated: #94460F;
  --yields: #A09096;
  --accent: #8C2F45;
  --on-accent: #FFFFFF;
  --accent-tint: #F6E1E5;
  --accent-2: #4F6630;
  --on-accent-2: #FFFFFF;
  --accent-2-tint: #EAF0E0;
  --accent-3: #6A4C93;
  --on-accent-3: #FFFFFF;
  --accent-3-tint: #EEE7F5;
  --edge: #8E7C83;
  --ring: #8A7A80;
  --shadow: 0 18px 40px -26px rgba(70,50,30,0.42);
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

:root[data-theme="matcha"] {
  color-scheme: light;
  --void: #F3F0E0;
  --substrate: #EBE7D3;
  --surface: #FBF9F0;
  --surface-raised: #FFFFFF;
  --hairline: #DBD6BF;
  --ink: #262A22;
  --ink-2: #4F5446;
  --ink-3: #5E6351;
  --thread: #7A5406;
  --thread-glow: #7A54062e;
  --hypha: #3F5A26;
  --hypha-dim: #3F5A261f;
  --tension: #A3243F;
  --contested: #5B47A8;
  --tolerated: #94460F;
  --yields: #979A86;
  --accent: #3F5A26;
  --on-accent: #FFFFFF;
  --accent-tint: #E6EDDA;
  --accent-2: #7A4A2A;
  --on-accent-2: #FFFFFF;
  --accent-2-tint: #F2E6DB;
  --accent-3: #A2432C;
  --on-accent-3: #FFFFFF;
  --accent-3-tint: #F8E4DC;
  --edge: #777B66;
  --ring: #777B66;
  --shadow: 0 18px 40px -26px rgba(70,50,30,0.42);
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

:root[data-theme="uguisu"] {
  color-scheme: light;
  --void: #DDE5C8;
  --substrate: #D3DCBC;
  --surface: #F6F8EE;
  --surface-raised: #FFFFFF;
  --hairline: #C4CEAB;
  --ink: #1F261A;
  --ink-2: #465239;
  --ink-3: #4B563F;
  --thread: #6B4A05;
  --thread-glow: #6B4A052e;
  --hypha: #3B5323;
  --hypha-dim: #3B53231f;
  --tension: #8F1F37;
  --contested: #4E3C94;
  --tolerated: #7E3B0C;
  --yields: #8A9477;
  --accent: #3B5323;
  --on-accent: #FFFFFF;
  --accent-tint: #E3EBD3;
  --accent-2: #6E3F22;
  --on-accent-2: #FFFFFF;
  --accent-2-tint: #F2E4D9;
  --accent-3: #9C431C;
  --on-accent-3: #FFFFFF;
  --accent-3-tint: #F9E3D7;
  --edge: #6F7A5D;
  --ring: #707A5E;
  --shadow: 0 18px 40px -26px rgba(70,50,30,0.42);
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

:root[data-theme="kawaraban"] {
  color-scheme: light;
  --void: #F5F0E7;
  --substrate: #ECE5D8;
  --surface: #FAF7F1;
  --surface-raised: #FFFFFF;
  --hairline: #D9D0BF;
  --ink: #1A1612;
  --ink-2: #474036;
  --ink-3: #685F53;
  --thread: #83540A;
  --thread-glow: #83540A2e;
  --hypha: #1D6A5A;
  --hypha-dim: #1D6A5A1f;
  --tension: #B3204F;
  --contested: #5A43C4;
  --tolerated: #8F4E0C;
  --yields: #9A9185;
  --accent: #1D6A5A;
  --on-accent: #FFFFFF;
  --accent-tint: #E3EEEA;
  --accent-2: #5A43C4;
  --on-accent-2: #FFFFFF;
  --accent-2-tint: #ECE8F8;
  --accent-3: #83540A;
  --on-accent-3: #FFFFFF;
  --accent-3-tint: #F5EAD6;
  --edge: #857C6E;
  --ring: #857C6E;
  --shadow: 0 18px 40px -26px rgba(70,50,30,0.42);
  --font-ui: "EB Garamond", "Iowan Old Style", Garamond, Georgia, serif;
}

:root[data-theme="kon"] {
  color-scheme: dark;
  --void: #17233A;
  --substrate: #132034;
  --surface: #1F2E4A;
  --surface-raised: #283A5C;
  --hairline: #33466A;
  --ink: #F3EBDD;
  --ink-2: #D2C8B8;
  --ink-3: #B8AE9B;
  --thread: #E8B13F;
  --thread-glow: #E8B13F40;
  --hypha: #8EC5E8;
  --hypha-dim: #8EC5E81f;
  --tension: #FF8FA3;
  --contested: #C3B5FF;
  --tolerated: #F4A261;
  --yields: #5F6E8C;
  --accent: #E8B13F;
  --on-accent: #17233A;
  --accent-tint: #3A3524;
  --accent-2: #F2A7BA;
  --on-accent-2: #17233A;
  --accent-2-tint: #43304A;
  --accent-3: #F08A64;
  --on-accent-3: #17233A;
  --accent-3-tint: #46302C;
  --edge: #8C97AD;
  --ring: #7F8BA3;
  --shadow: 0 18px 40px -24px rgba(0,0,0,0.65);
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}

:root[data-theme="kintsugi"] {
  color-scheme: dark;
  --void: #1C1A18;
  --substrate: #171513;
  --surface: #272421;
  --surface-raised: #322E2A;
  --hairline: #3A352F;
  --ink: #F1EADF;
  --ink-2: #CDC3B5;
  --ink-3: #B3A999;
  --thread: #D9A845;
  --thread-glow: #D9A84540;
  --hypha: #8CC7B4;
  --hypha-dim: #8CC7B41f;
  --tension: #FF8FA3;
  --contested: #C3B5FF;
  --tolerated: #F4A261;
  --yields: #6A6258;
  --accent: #D9A845;
  --on-accent: #1C1A18;
  --accent-tint: #3A3020;
  --accent-2: #8CC7B4;
  --on-accent-2: #1C1A18;
  --accent-2-tint: #22332E;
  --accent-3: #F07C6B;
  --on-accent-3: #1C1A18;
  --accent-3-tint: #3D2522;
  --edge: #948B7E;
  --ring: #8A8276;
  --shadow: 0 18px 40px -24px rgba(0,0,0,0.65);
  --font-ui: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", system-ui, sans-serif;
}