/* ============================================================
   Huaxia Appearance System — themes, fonts, font sizes, picker
   Adapted from masoretes.online; maps onto Huaxia --c-* tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,600;0,700;1,400&family=EB+Garamond:ital,wght@0,400;0,600;0,700;1,400&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,400&family=IBM+Plex+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Inter:wght@300;400;500;600;700&family=Literata:ital,opsz,wght@0,7..72,400;0,7..72,600;0,7..72,700;1,7..72,400&family=Lora:ital,wght@0,400;0,600;0,700;1,400&family=Merriweather:ital,wght@0,400;0,700;1,400&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,600;0,6..72,700;1,6..72,400&family=Noto+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Noto+Serif:ital,wght@0,400;0,600;0,700;1,400&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,600;0,8..60,700;1,8..60,400&display=swap');

/* Font-size driven by JS (html[data-font-size] + inline font-size) */
html[data-font-size] { /* marker */ }


html[data-theme="light"],
html:not([data-theme]) {
  color-scheme: light;
  --c-red: #C45148;
  --c-red-dark: #9E3731;
  --c-red-soft: #DE6B62;
  --c-red-wash: rgba(196, 81, 72, 0.08);
  --c-red-light: #FDF6F5;
  --c-indigo: #1B2D40;
  --c-indigo-dark: #121F2D;
  --c-indigo-light: #27415D;
  --c-blue-mist: #4A6F8A;
  --c-blue-porcelain: #2E5C7A;
  --c-pastel-blue: #B8D5E5;
  --c-pastel-blue-light: #EBF3F9;
  --c-pastel-blue-soft: #D4E5F1;
  --c-pastel-blue-wash: rgba(184, 213, 229, 0.35);
  --c-sandy-gold: #C8A97E;
  --c-sandy-gold-soft: #DEC29B;
  --c-sandy-gold-light: #F8F4EC;
  --c-sandy-gold-dark: #A68352;
  --c-gold-border: #E8DDCD;
  --c-gold-wash: rgba(200, 169, 126, 0.15);
  --c-ink: #1F2328;
  --c-mid: #4E565E;
  --c-muted: #818992;
  --c-border: #E5DFD7;
  --c-border-light: #EFEBE4;
  --c-paper: #FAF8F5;
  --c-surface: #F4EFE8;
  --c-white: #FFFFFF;
  --bg-body: #FAF8F5;
  --bg-card: #FFFFFF;
  --bg-soft: #F4EFE8;
  --bg-mute: #F8F4EC;
  --bg-paper: #F4EFE8;
  --text-main: #1F2328;
  --text-head: #1B2D40;
  --text-muted: #818992;
  --border-color: #E5DFD7;
  --shadow-color: rgba(27, 45, 64, 0.08);
  --shadow-sm: 0 2px 8px rgba(27, 45, 64, 0.05);
  --shadow-md: 0 8px 24px rgba(27, 45, 64, 0.08);
  --shadow-lg: 0 16px 40px rgba(27, 45, 64, 0.12);
  --shadow-red: 0 8px 20px rgba(196, 81, 72, 0.18);
  --shadow-gold: 0 6px 18px rgba(200, 169, 126, 0.25);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --c-red: #E07A6A;
  --c-red-dark: #C45C4E;
  --c-red-soft: #F0A090;
  --c-red-wash: rgba(224, 122, 106, 0.12);
  --c-red-light: #3A1F1C;
  --c-indigo: #93C5FD;
  --c-indigo-dark: #6A8EB6;
  --c-indigo-light: #A2CDFD;
  --c-blue-mist: #38BDF8;
  --c-blue-porcelain: #7DD3FC;
  --c-pastel-blue: #3B6A8A;
  --c-pastel-blue-light: #172554;
  --c-pastel-blue-soft: #1E3A5F;
  --c-pastel-blue-wash: rgba(59, 106, 138, 0.35);
  --c-sandy-gold: #E8C76B;
  --c-sandy-gold-soft: #E8C76B;
  --c-sandy-gold-light: #2A2418;
  --c-sandy-gold-dark: #F0D78A;
  --c-gold-border: #3D4F66;
  --c-gold-wash: rgba(212, 175, 55, 0.08);
  --c-ink: #E2E8F0;
  --c-mid: #CBD5E1;
  --c-muted: #94A3B8;
  --c-border: #1E3A5F;
  --c-border-light: #1A2332;
  --c-paper: #0B1220;
  --c-surface: #0F172A;
  --c-white: #0F172A;
  --bg-body: #0B1220;
  --bg-card: #0F172A;
  --bg-soft: #0F172A;
  --bg-mute: #0F172A;
  --bg-paper: #0F172A;
  --text-main: #E2E8F0;
  --text-head: #93C5FD;
  --text-muted: #94A3B8;
  --border-color: #1E3A5F;
  --shadow-color: rgba(0, 0, 0, 0.35);
  --shadow-sm: 0 2px 8px rgba(147, 197, 253, 0.25);
  --shadow-md: 0 8px 24px rgba(147, 197, 253, 0.35);
  --shadow-lg: 0 16px 40px rgba(147, 197, 253, 0.45);
  --shadow-red: 0 8px 20px rgba(224, 122, 106, 0.18);
  --shadow-gold: 0 6px 18px rgba(232, 199, 107, 0.25);
}

html[data-theme="sepia"] {
  color-scheme: light;
  --c-red: #8B6914;
  --c-red-dark: #644C0E;
  --c-red-soft: #B49E66;
  --c-red-wash: rgba(139, 105, 20, 0.08);
  --c-red-light: #EDE0C8;
  --c-indigo: #5C4033;
  --c-indigo-dark: #422E25;
  --c-indigo-light: #796258;
  --c-blue-mist: #745424;
  --c-blue-porcelain: #70574B;
  --c-pastel-blue: #D4C4A8;
  --c-pastel-blue-light: #F5EBD9;
  --c-pastel-blue-soft: #EDE0C8;
  --c-pastel-blue-wash: rgba(212, 196, 168, 0.35);
  --c-sandy-gold: #B8952A;
  --c-sandy-gold-soft: #A67C00;
  --c-sandy-gold-light: #F0E2B8;
  --c-sandy-gold-dark: #8B6914;
  --c-gold-border: #D4C4A8;
  --c-gold-wash: rgba(184, 149, 42, 0.12);
  --c-ink: #3D2B1F;
  --c-mid: #5C4033;
  --c-muted: #7A6555;
  --c-border: #D4C4A8;
  --c-border-light: #FAF4E8;
  --c-paper: #F4EBD8;
  --c-surface: #F0E4C8;
  --c-white: #FAF3E3;
  --bg-body: #F4EBD8;
  --bg-card: #FAF3E3;
  --bg-soft: #F0E4C8;
  --bg-mute: #F7F0E0;
  --bg-paper: #F0E4C8;
  --text-main: #3D2B1F;
  --text-head: #5C4033;
  --text-muted: #7A6555;
  --border-color: #D4C4A8;
  --shadow-color: rgba(92, 64, 51, 0.12);
  --shadow-sm: 0 2px 8px rgba(92, 64, 51, 0.05);
  --shadow-md: 0 8px 24px rgba(92, 64, 51, 0.08);
  --shadow-lg: 0 16px 40px rgba(92, 64, 51, 0.12);
  --shadow-red: 0 8px 20px rgba(139, 105, 20, 0.18);
  --shadow-gold: 0 6px 18px rgba(184, 149, 42, 0.25);
}

html[data-theme="grey"] {
  color-scheme: light;
  --c-red: #4B5563;
  --c-red-dark: #363D47;
  --c-red-soft: #8A909A;
  --c-red-wash: rgba(75, 85, 99, 0.08);
  --c-red-light: #E5E7EB;
  --c-indigo: #374151;
  --c-indigo-dark: #282F3A;
  --c-indigo-light: #5B6370;
  --c-blue-mist: #414B5A;
  --c-blue-porcelain: #4F5866;
  --c-pastel-blue: #D1D5DB;
  --c-pastel-blue-light: #F3F4F6;
  --c-pastel-blue-soft: #E5E7EB;
  --c-pastel-blue-wash: rgba(209, 213, 219, 0.35);
  --c-sandy-gold: #A8A29E;
  --c-sandy-gold-soft: #8B8680;
  --c-sandy-gold-light: #E7E5E4;
  --c-sandy-gold-dark: #78716C;
  --c-gold-border: #D1D5DB;
  --c-gold-wash: rgba(120, 113, 108, 0.08);
  --c-ink: #1F2937;
  --c-mid: #374151;
  --c-muted: #6B7280;
  --c-border: #D1D5DB;
  --c-border-light: #F9FAFB;
  --c-paper: #F3F4F6;
  --c-surface: #F3F4F6;
  --c-white: #FFFFFF;
  --bg-body: #F3F4F6;
  --bg-card: #FFFFFF;
  --bg-soft: #F3F4F6;
  --bg-mute: #F9FAFB;
  --bg-paper: #F3F4F6;
  --text-main: #1F2937;
  --text-head: #111827;
  --text-muted: #6B7280;
  --border-color: #D1D5DB;
  --shadow-color: rgba(17, 24, 39, 0.08);
  --shadow-sm: 0 2px 8px rgba(55, 65, 81, 0.05);
  --shadow-md: 0 8px 24px rgba(55, 65, 81, 0.08);
  --shadow-lg: 0 16px 40px rgba(55, 65, 81, 0.12);
  --shadow-red: 0 8px 20px rgba(75, 85, 99, 0.18);
  --shadow-gold: 0 6px 18px rgba(168, 162, 158, 0.25);
}

html[data-theme="warm"] {
  color-scheme: light;
  --c-red: #B45309;
  --c-red-dark: #823C06;
  --c-red-soft: #CE8F5F;
  --c-red-wash: rgba(180, 83, 9, 0.08);
  --c-red-light: #F8EBD7;
  --c-indigo: #4A3728;
  --c-indigo-dark: #35281D;
  --c-indigo-light: #6B5B4F;
  --c-blue-mist: #7F4518;
  --c-blue-porcelain: #604F42;
  --c-pastel-blue: #EDD9B8;
  --c-pastel-blue-light: #FBF3E6;
  --c-pastel-blue-soft: #F8EBD7;
  --c-pastel-blue-wash: rgba(237, 217, 184, 0.35);
  --c-sandy-gold: #D4A017;
  --c-sandy-gold-soft: #C49212;
  --c-sandy-gold-light: #F8EAC0;
  --c-sandy-gold-dark: #B8860B;
  --c-gold-border: #EDD9B8;
  --c-gold-wash: rgba(212, 160, 23, 0.1);
  --c-ink: #2C2118;
  --c-mid: #4A3728;
  --c-muted: #7D6A58;
  --c-border: #EDD9B8;
  --c-border-light: #FDF8F0;
  --c-paper: #FBF6EE;
  --c-surface: #FBF0DC;
  --c-white: #FFFCF7;
  --bg-body: #FBF6EE;
  --bg-card: #FFFCF7;
  --bg-soft: #FBF0DC;
  --bg-mute: #FDF8F0;
  --bg-paper: #FBF0DC;
  --text-main: #2C2118;
  --text-head: #4A3728;
  --text-muted: #7D6A58;
  --border-color: #EDD9B8;
  --shadow-color: rgba(74, 55, 40, 0.1);
  --shadow-sm: 0 2px 8px rgba(74, 55, 40, 0.05);
  --shadow-md: 0 8px 24px rgba(74, 55, 40, 0.08);
  --shadow-lg: 0 16px 40px rgba(74, 55, 40, 0.12);
  --shadow-red: 0 8px 20px rgba(180, 83, 9, 0.18);
  --shadow-gold: 0 6px 18px rgba(212, 160, 23, 0.25);
}

html[data-theme="rose"] {
  color-scheme: light;
  --c-red: #C44B6E;
  --c-red-dark: #993A56;
  --c-red-soft: #E08AA3;
  --c-red-wash: rgba(196, 75, 110, 0.08);
  --c-red-light: #FDF2F5;
  --c-indigo: #7A2E45;
  --c-indigo-dark: #582132;
  --c-indigo-light: #925466;
  --c-blue-mist: #9C2351;
  --c-blue-porcelain: #8A475B;
  --c-pastel-blue: #F0C4D0;
  --c-pastel-blue-light: #FDF0F4;
  --c-pastel-blue-soft: #F9DDE5;
  --c-pastel-blue-wash: rgba(240, 196, 208, 0.35);
  --c-sandy-gold: #C9A227;
  --c-sandy-gold-soft: #B8941F;
  --c-sandy-gold-light: #F6E9C0;
  --c-sandy-gold-dark: #A8841A;
  --c-gold-border: #F0C4D0;
  --c-gold-wash: rgba(201, 162, 39, 0.1);
  --c-ink: #3F1D2A;
  --c-mid: #5C2A3A;
  --c-muted: #8B5A6B;
  --c-border: #F0C4D0;
  --c-border-light: #FEF7F9;
  --c-paper: #FDF5F7;
  --c-surface: #FBE8EE;
  --c-white: #FFFCFD;
  --bg-body: #FDF5F7;
  --bg-card: #FFFCFD;
  --bg-soft: #FBE8EE;
  --bg-mute: #FEF7F9;
  --bg-paper: #FBE8EE;
  --text-main: #3F1D2A;
  --text-head: #7A2E45;
  --text-muted: #8B5A6B;
  --border-color: #F0C4D0;
  --shadow-color: rgba(122, 46, 69, 0.12);
  --shadow-sm: 0 2px 8px rgba(122, 46, 69, 0.05);
  --shadow-md: 0 8px 24px rgba(122, 46, 69, 0.08);
  --shadow-lg: 0 16px 40px rgba(122, 46, 69, 0.12);
  --shadow-red: 0 8px 20px rgba(196, 75, 110, 0.18);
  --shadow-gold: 0 6px 18px rgba(201, 162, 39, 0.25);
}

html[data-theme="ocean"] {
  color-scheme: light;
  --c-red: #0284C7;
  --c-red-dark: #015F8F;
  --c-red-soft: #5BAFDB;
  --c-red-wash: rgba(2, 132, 199, 0.08);
  --c-red-light: #CFF1FA;
  --c-indigo: #0C4A6E;
  --c-indigo-dark: #09354F;
  --c-indigo-light: #386B88;
  --c-blue-mist: #07679A;
  --c-blue-porcelain: #29607F;
  --c-pastel-blue: #A5D8E8;
  --c-pastel-blue-light: #E8F7FC;
  --c-pastel-blue-soft: #CFF1FA;
  --c-pastel-blue-wash: rgba(165, 216, 232, 0.35);
  --c-sandy-gold: #D4AF37;
  --c-sandy-gold-soft: #C5A028;
  --c-sandy-gold-light: #F3E7C0;
  --c-sandy-gold-dark: #B8860B;
  --c-gold-border: #A5D8E8;
  --c-gold-wash: rgba(212, 175, 55, 0.1);
  --c-ink: #0F2F3D;
  --c-mid: #164E63;
  --c-muted: #4A7C8C;
  --c-border: #A5D8E8;
  --c-border-light: #F3FBFD;
  --c-paper: #F0F9FC;
  --c-surface: #E8F6FB;
  --c-white: #FBFEFF;
  --bg-body: #F0F9FC;
  --bg-card: #FBFEFF;
  --bg-soft: #E8F6FB;
  --bg-mute: #F5FBFD;
  --bg-paper: #E8F6FB;
  --text-main: #0F2F3D;
  --text-head: #0C4A6E;
  --text-muted: #4A7C8C;
  --border-color: #A5D8E8;
  --shadow-color: rgba(12, 74, 110, 0.12);
  --shadow-sm: 0 2px 8px rgba(12, 74, 110, 0.05);
  --shadow-md: 0 8px 24px rgba(12, 74, 110, 0.08);
  --shadow-lg: 0 16px 40px rgba(12, 74, 110, 0.12);
  --shadow-red: 0 8px 20px rgba(2, 132, 199, 0.18);
  --shadow-gold: 0 6px 18px rgba(212, 175, 55, 0.25);
}

html[data-theme="orange"] {
  color-scheme: light;
  --c-red: #EA580C;
  --c-red-dark: #A83F09;
  --c-red-soft: #F19261;
  --c-red-wash: rgba(234, 88, 12, 0.08);
  --c-red-light: #FED7AA;
  --c-indigo: #7C2D12;
  --c-indigo-dark: #59200D;
  --c-indigo-light: #94533D;
  --c-blue-mist: #B3420F;
  --c-blue-porcelain: #8C462E;
  --c-pastel-blue: #FDBA74;
  --c-pastel-blue-light: #FFF7ED;
  --c-pastel-blue-soft: #FED7AA;
  --c-pastel-blue-wash: rgba(253, 186, 116, 0.35);
  --c-sandy-gold: #F97316;
  --c-sandy-gold-soft: #EA580C;
  --c-sandy-gold-light: #FDBA74;
  --c-sandy-gold-dark: #C2410C;
  --c-gold-border: #FDBA74;
  --c-gold-wash: rgba(249, 115, 22, 0.12);
  --c-ink: #431407;
  --c-mid: #7C2D12;
  --c-muted: #C2410C;
  --c-border: #FDBA74;
  --c-border-light: #FFFBF5;
  --c-paper: #FFF9F4;
  --c-surface: #FED7AA;
  --c-white: #FFFCFA;
  --bg-body: #FFF9F4;
  --bg-card: #FFFCFA;
  --bg-soft: #FED7AA;
  --bg-mute: #FFF7ED;
  --bg-paper: #FED7AA;
  --text-main: #431407;
  --text-head: #7C2D12;
  --text-muted: #C2410C;
  --border-color: #FDBA74;
  --shadow-color: rgba(124, 45, 18, 0.1);
  --shadow-sm: 0 2px 8px rgba(124, 45, 18, 0.05);
  --shadow-md: 0 8px 24px rgba(124, 45, 18, 0.08);
  --shadow-lg: 0 16px 40px rgba(124, 45, 18, 0.12);
  --shadow-red: 0 8px 20px rgba(234, 88, 12, 0.18);
  --shadow-gold: 0 6px 18px rgba(249, 115, 22, 0.25);
}

html[data-theme="yellow"] {
  color-scheme: light;
  --c-red: #CA8A04;
  --c-red-dark: #916303;
  --c-red-soft: #DDB35C;
  --c-red-wash: rgba(202, 138, 4, 0.08);
  --c-red-light: #FEF08A;
  --c-indigo: #713F12;
  --c-indigo-dark: #512D0D;
  --c-indigo-light: #8B623D;
  --c-blue-mist: #9E640B;
  --c-blue-porcelain: #82562E;
  --c-pastel-blue: #FDE68A;
  --c-pastel-blue-light: #FEF9C3;
  --c-pastel-blue-soft: #FEF08A;
  --c-pastel-blue-wash: rgba(253, 230, 138, 0.35);
  --c-sandy-gold: #EAB308;
  --c-sandy-gold-soft: #CA8A04;
  --c-sandy-gold-light: #FDE047;
  --c-sandy-gold-dark: #A16207;
  --c-gold-border: #FDE047;
  --c-gold-wash: rgba(234, 179, 8, 0.14);
  --c-ink: #422006;
  --c-mid: #713F12;
  --c-muted: #A16207;
  --c-border: #FDE047;
  --c-border-light: #FFFBEB;
  --c-paper: #FFFDF2;
  --c-surface: #FDE68A;
  --c-white: #FFFEF8;
  --bg-body: #FFFDF2;
  --bg-card: #FFFEF8;
  --bg-soft: #FDE68A;
  --bg-mute: #FEF9C3;
  --bg-paper: #FDE68A;
  --text-main: #422006;
  --text-head: #713F12;
  --text-muted: #A16207;
  --border-color: #FDE047;
  --shadow-color: rgba(113, 63, 18, 0.1);
  --shadow-sm: 0 2px 8px rgba(113, 63, 18, 0.05);
  --shadow-md: 0 8px 24px rgba(113, 63, 18, 0.08);
  --shadow-lg: 0 16px 40px rgba(113, 63, 18, 0.12);
  --shadow-red: 0 8px 20px rgba(202, 138, 4, 0.18);
  --shadow-gold: 0 6px 18px rgba(234, 179, 8, 0.25);
}

html[data-theme="leaf"] {
  color-scheme: light;
  --c-red: #15803D;
  --c-red-dark: #0F5C2C;
  --c-red-soft: #67AC81;
  --c-red-wash: rgba(21, 128, 61, 0.08);
  --c-red-light: #DCFCE7;
  --c-indigo: #14532D;
  --c-indigo-dark: #0E3C20;
  --c-indigo-light: #3E7253;
  --c-blue-mist: #146A35;
  --c-blue-porcelain: #306846;
  --c-pastel-blue: #BBF7D0;
  --c-pastel-blue-light: #F0FDF4;
  --c-pastel-blue-soft: #DCFCE7;
  --c-pastel-blue-wash: rgba(187, 247, 208, 0.35);
  --c-sandy-gold: #CA8A04;
  --c-sandy-gold-soft: #B45309;
  --c-sandy-gold-light: #FEF3C7;
  --c-sandy-gold-dark: #A16207;
  --c-gold-border: #BBF7D0;
  --c-gold-wash: rgba(202, 138, 4, 0.1);
  --c-ink: #052E16;
  --c-mid: #14532D;
  --c-muted: #15803D;
  --c-border: #BBF7D0;
  --c-border-light: #F7FEF9;
  --c-paper: #F7FEF9;
  --c-surface: #E8F8EE;
  --c-white: #FBFFFC;
  --bg-body: #F7FEF9;
  --bg-card: #FBFFFC;
  --bg-soft: #E8F8EE;
  --bg-mute: #F0FDF4;
  --bg-paper: #E8F8EE;
  --text-main: #052E16;
  --text-head: #14532D;
  --text-muted: #15803D;
  --border-color: #BBF7D0;
  --shadow-color: rgba(20, 83, 45, 0.1);
  --shadow-sm: 0 2px 8px rgba(20, 83, 45, 0.05);
  --shadow-md: 0 8px 24px rgba(20, 83, 45, 0.08);
  --shadow-lg: 0 16px 40px rgba(20, 83, 45, 0.12);
  --shadow-red: 0 8px 20px rgba(21, 128, 61, 0.18);
  --shadow-gold: 0 6px 18px rgba(202, 138, 4, 0.25);
}

html[data-theme="purple"] {
  color-scheme: light;
  --c-red: #7C3AED;
  --c-red-dark: #592AAB;
  --c-red-soft: #AA7FF3;
  --c-red-wash: rgba(124, 58, 237, 0.08);
  --c-red-light: #EDE9FE;
  --c-indigo: #4C1D95;
  --c-indigo-dark: #37156B;
  --c-indigo-light: #6C46A8;
  --c-blue-mist: #642CC1;
  --c-blue-porcelain: #6138A2;
  --c-pastel-blue: #DDD6FE;
  --c-pastel-blue-light: #F5F3FF;
  --c-pastel-blue-soft: #EDE9FE;
  --c-pastel-blue-wash: rgba(221, 214, 254, 0.35);
  --c-sandy-gold: #C4B5FD;
  --c-sandy-gold-soft: #8B5CF6;
  --c-sandy-gold-light: #EDE9FE;
  --c-sandy-gold-dark: #7C3AED;
  --c-gold-border: #DDD6FE;
  --c-gold-wash: rgba(124, 58, 237, 0.1);
  --c-ink: #2E1065;
  --c-mid: #4C1D95;
  --c-muted: #6D28D9;
  --c-border: #DDD6FE;
  --c-border-light: #FAF8FF;
  --c-paper: #FAF8FF;
  --c-surface: #EDE9FE;
  --c-white: #FDFCFF;
  --bg-body: #FAF8FF;
  --bg-card: #FDFCFF;
  --bg-soft: #EDE9FE;
  --bg-mute: #F5F3FF;
  --bg-paper: #EDE9FE;
  --text-main: #2E1065;
  --text-head: #4C1D95;
  --text-muted: #6D28D9;
  --border-color: #DDD6FE;
  --shadow-color: rgba(76, 29, 149, 0.12);
  --shadow-sm: 0 2px 8px rgba(76, 29, 149, 0.05);
  --shadow-md: 0 8px 24px rgba(76, 29, 149, 0.08);
  --shadow-lg: 0 16px 40px rgba(76, 29, 149, 0.12);
  --shadow-red: 0 8px 20px rgba(124, 58, 237, 0.18);
  --shadow-gold: 0 6px 18px rgba(196, 181, 253, 0.25);
}

html[data-theme="custom"] {
  color-scheme: light;
}

/* Font family switches — body + display share the chosen face */

html[data-font="dubai"] {
  --font-body: 'Dubai', 'Dubai-Regular', 'Dubai Regular', 'Dubai-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Dubai', 'Dubai-Regular', 'Dubai Regular', 'Dubai-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-dubai: 'Dubai', 'Dubai-Regular', 'Dubai Regular', 'Dubai-Medium', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-font="inter"] {
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-dubai: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-font="fraunces"] {
  --font-body: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Fraunces', Georgia, 'Times New Roman', serif;
}

html[data-font="noto-sans"] {
  --font-body: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-dubai: 'Noto Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html[data-font="noto-serif"] {
  --font-body: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-display: 'Noto Serif', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Noto Serif', Georgia, 'Times New Roman', serif;
}

html[data-font="merriweather"] {
  --font-body: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-display: 'Merriweather', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Merriweather', Georgia, 'Times New Roman', serif;
}

html[data-font="source-serif"] {
  --font-body: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-display: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
  --font-dubai: 'Source Serif 4', 'Source Serif Pro', Georgia, serif;
}

html[data-font="literata"] {
  --font-body: 'Literata', Georgia, 'Times New Roman', serif;
  --font-display: 'Literata', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Literata', Georgia, 'Times New Roman', serif;
}

html[data-font="lora"] {
  --font-body: 'Lora', Georgia, 'Times New Roman', serif;
  --font-display: 'Lora', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Lora', Georgia, 'Times New Roman', serif;
}

html[data-font="playfair"] {
  --font-body: 'Playfair Display', Georgia, serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --font-dubai: 'Playfair Display', Georgia, serif;
}

html[data-font="crimson-pro"] {
  --font-body: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-display: 'Crimson Pro', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Crimson Pro', Georgia, 'Times New Roman', serif;
}

html[data-font="ibm-plex-sans"] {
  --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-dubai: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

html[data-font="newsreader"] {
  --font-body: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-dubai: 'Newsreader', Georgia, 'Times New Roman', serif;
}

html[data-font="system-ui"] {
  --font-body: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-dubai: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

html[data-font="georgia"] {
  --font-body: Georgia, 'Times New Roman', Times, serif;
  --font-display: Georgia, 'Times New Roman', Times, serif;
  --font-dubai: Georgia, 'Times New Roman', Times, serif;
}

html[data-font="garamond"] {
  --font-body: 'EB Garamond', Garamond, 'Palatino Linotype', Palatino, serif;
  --font-display: 'EB Garamond', Garamond, 'Palatino Linotype', Palatino, serif;
  --font-dubai: 'EB Garamond', Garamond, 'Palatino Linotype', Palatino, serif;
}

html[data-font="times"] {
  --font-body: Times, 'Times New Roman', Georgia, serif;
  --font-display: Times, 'Times New Roman', Georgia, serif;
  --font-dubai: Times, 'Times New Roman', Georgia, serif;
}


/* Ensure common text nodes pick up the chosen font */
html[data-font] body,
html[data-font] body *:not(.seal-stamp):not(.seal-stamp *):not(.seal-text):not([class*="calligraphy"]):not(.hero-dispatch::before) {
  font-family: var(--font-body);
}
html[data-font] h1,
html[data-font] h2,
html[data-font] .section-title,
html[data-font] .hero-dispatch__title {
  font-family: var(--font-display) !important;
}
html[data-font] .seal-stamp,
html[data-font] .seal-stamp *,
html[data-font] .seal-text {
  font-family: var(--font-chinese) !important;
}

/* Dark / themed header glass (hardcoded rgba in main.css) */
html[data-theme="dark"] .site-header {
  background: rgba(11, 18, 32, 0.92) !important;
  border-bottom-color: var(--c-border) !important;
}
html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .site-footer__inner {
  background: var(--c-surface) !important;
  color: var(--c-ink);
  border-color: var(--c-border);
}
html[data-theme="dark"] .mobile-nav {
  background: var(--c-paper) !important;
  border-left-color: var(--c-sandy-gold) !important;
}
html[data-theme="dark"] .mobile-nav__overlay {
  background: rgba(0, 0, 0, 0.55) !important;
}
html[data-theme="dark"] .nav__hamburger span {
  background: var(--c-ink) !important;
}
html[data-theme]:not([data-theme="light"]):not([data-theme=""]) .site-header {
  background: color-mix(in srgb, var(--c-paper) 92%, transparent);
  border-bottom-color: var(--c-gold-border);
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
  html[data-theme]:not([data-theme="light"]) .site-header {
    background: var(--c-paper);
  }
}

/* Inline hardcodes that break dark mode */
html[data-theme="dark"] .archive-lattice__masthead,
html[data-theme="dark"] .archive-tile {
  background: var(--c-white) !important;
}
html[data-theme="dark"] .contact-page__notice {
  background: var(--c-surface) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-border) !important;
}

/* ---------- Theme picker panel (adapted from masoretes) ---------- */

.theme-picker {
    margin-top: 0.45rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--border-color, var(--c-border));
}
.theme-picker-label {
    display: block;
    font-size: 0.55rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted, var(--c-muted));
    margin-bottom: 0.28rem;
}
.theme-picker-options {
    display: flex;
    flex-wrap: nowrap;
    gap: 0.22rem;
    align-items: center;
}
.site-sidebar .font-picker-btn {
    font-size: 0.5rem;
    padding: 0.08rem 0.14rem;
    gap: 0.1rem;
    line-height: 1.1;
}
.site-sidebar .theme-picker-btn {
    width: 1.05rem;
    height: 1.05rem;
    padding: 0;
}
/* Colour-only theme chips (labels via title / aria-label) */
.theme-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    border: 1.5px solid var(--border-color, var(--c-border));
    background: transparent;
    color: transparent;
    font-size: 0;
    line-height: 0;
    border-radius: 2px;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
    flex-shrink: 0;
}
.theme-picker-btn:hover {
    transform: scale(1.12);
    border-color: var(--c-sandy-gold);
}
.theme-picker-btn.is-active {
    border-color: var(--c-sandy-gold);
    box-shadow: 0 0 0 2px var(--c-sandy-gold), 0 0 0 3px var(--bg-card, var(--c-white));
}
.theme-picker-btn .theme-swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: none;
    box-sizing: border-box;
}
.theme-picker-btn[data-theme-set="light"] .theme-swatch { background: #ffffff; box-shadow: inset 0 0 0 1px #94a3b8; }
.theme-picker-btn[data-theme-set="dark"] .theme-swatch { background: #0B1220; }
.theme-picker-btn[data-theme-set="sepia"] .theme-swatch { background: #e8d5b5; }
.theme-picker-btn[data-theme-set="grey"] .theme-swatch { background: #e5e7eb; }
.theme-picker-btn[data-theme-set="warm"] .theme-swatch { background: #f5e6d3; }
.theme-picker-btn[data-theme-set="rose"] .theme-swatch { background: #f3d0da; }
.theme-picker-btn[data-theme-set="ocean"] .theme-swatch { background: #b8e0ec; }
.theme-picker-btn[data-theme-set="orange"] .theme-swatch { background: #fdba74; }
.theme-picker-btn[data-theme-set="yellow"] .theme-swatch {
    background: #fde047;
    box-shadow: inset 0 0 0 0.5px var(--blue-border, #BAE6FD);
}
.theme-picker-btn[data-theme-set="leaf"] .theme-swatch { background: #bbf7d0; }
.theme-picker-btn[data-theme-set="purple"] .theme-swatch { background: #d8b4fe; border-color: #7c3aed; }


/* Fixed theme picker — bottom-left; draggable + minimizable */
.theme-picker-fixed {
    position: fixed;
    left: 0.6rem;
    bottom: 0.6rem;
    z-index: 140;
    width: min(20.5rem, calc(100vw - 1rem));
    max-height: min(70vh, 32rem);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 0;
    padding: 0.45rem 0.5rem 0.5rem;
    border: 1px solid var(--border-color, var(--c-border));
    border-radius: var(--radius-md);
    background: var(--bg-card, var(--c-white));
    box-shadow: 0 8px 28px var(--shadow-color, rgba(27,45,64,0.12));
    border-top: 1px solid var(--border-color, var(--c-border));
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.theme-panel-chrome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.35rem;
    margin: -0.1rem -0.05rem 0.3rem;
    padding: 0.05rem 0 0.2rem;
    border-bottom: 1px solid var(--border-color, var(--c-border));
    cursor: grab;
    user-select: none;
}
.theme-panel-chrome-title {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--text-muted, var(--c-muted));
    line-height: 1.2;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.theme-panel-chrome-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    flex: 0 0 auto;
}
.theme-panel-default-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.15rem;
    margin: 0;
    padding: 0 0.35rem;
    border: 1px solid var(--border-color, var(--c-border));
    border-radius: 0.25rem;
    background: var(--bg-mute, var(--c-surface));
    color: var(--text-muted, var(--c-muted));
    font-size: 0.48rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
    white-space: nowrap;
}
.theme-panel-default-btn:hover {
    background: var(--gold-wash);
    border-color: var(--c-sandy-gold);
    color: var(--c-sandy-gold-dark);
}
.theme-panel-default-btn:focus-visible {
    outline: 2px solid var(--c-sandy-gold);
    outline-offset: 1px;
}
.theme-panel-min-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    padding: 0;
    border: 1px solid var(--border-color, var(--c-border));
    border-radius: 0.25rem;
    background: var(--bg-mute, var(--c-surface));
    color: var(--text-head, var(--c-indigo));
    font-size: 0.55rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;
}
.theme-panel-min-btn:hover {
    background: var(--gold-wash);
    border-color: var(--c-sandy-gold);
    color: var(--c-sandy-gold-dark);
}
.theme-panel-min-btn:focus-visible {
    outline: 2px solid var(--c-sandy-gold);
    outline-offset: 1px;
}
.theme-picker-fixed.theme-picker-draggable {
    touch-action: none;
    cursor: grab;
}
.theme-picker-fixed.theme-picker-draggable .theme-picker-label,
.theme-picker-fixed.theme-picker-draggable .font-picker-label,
.theme-picker-fixed.theme-picker-draggable .theme-panel-chrome {
    cursor: grab;
    user-select: none;
}
.theme-picker-fixed.theme-picker-draggable button {
    cursor: pointer;
    touch-action: manipulation;
}
.theme-picker-fixed.is-dragging {
    cursor: grabbing;
    user-select: none;
    opacity: 0.96;
    box-shadow: 0 12px 36px var(--shadow-color, rgba(27,45,64,0.12));
}
/* Keep minimize control clickable while dragging starts elsewhere */
.theme-picker-fixed.is-dragging .theme-picker-options button,
.theme-picker-fixed.is-dragging .font-picker button,
.theme-picker-fixed.is-dragging .font-size-picker button {
    pointer-events: none;
}
.theme-picker-fixed.is-dragging .theme-panel-min-btn,
.theme-picker-fixed.is-dragging .theme-panel-default-btn {
    pointer-events: auto;
}
/* Minimized: compact chip; expand via top-right button */
.theme-picker-fixed.is-minimized {
    width: auto;
    min-width: 7.25rem;
    max-width: min(12.5rem, calc(100vw - 1rem));
    max-height: none;
    overflow: hidden;
    padding: 0.28rem 0.35rem;
}
.theme-picker-fixed.is-minimized .theme-panel-chrome {
    margin: 0;
    padding: 0;
    border-bottom: none;
}
.theme-picker-fixed.is-minimized .theme-panel-default-btn {
    /* keep Default available when minimized */
    display: inline-flex;
}
.theme-picker-fixed.is-minimized > .theme-picker-label,
.theme-picker-fixed.is-minimized > .theme-picker-options,
.theme-picker-fixed.is-minimized > .font-picker,
.theme-picker-fixed.is-minimized > .font-size-picker {
    display: none !important;
}
.theme-picker-fixed .theme-picker-label {
    margin-bottom: 0.25rem;
}
.theme-picker-fixed .theme-picker-options {
    max-height: none;
}
.theme-picker-fixed .font-picker-options {
    display: none !important;
}
.theme-picker-fixed .font-picker-select {
    font-size: 0.72rem;
    padding: 0.32rem 0.4rem;
}
.theme-picker-fixed .theme-picker-btn {
    width: 1.2rem;
    height: 1.2rem;
}
.theme-picker-fixed .theme-picker-options {
    flex-wrap: nowrap;
    gap: 0.2rem;
    width: 100%;
}
.theme-picker-fixed .font-picker-btn { display: none !important; }
/* Sit above back-to-top if both present; leave room on small screens */
@media (max-width: 640px) {
    .theme-picker-fixed {
        left: 0.35rem;
        bottom: 0.35rem;
        width: min(18.5rem, calc(100vw - 0.7rem));
        max-height: min(55vh, 22rem);
        padding: 0.4rem 0.45rem 0.45rem;
    }
    .theme-picker-fixed .theme-picker-btn {
        width: 1.05rem;
        height: 1.05rem;
    }
    .theme-picker-fixed .theme-picker-options {
        gap: 0.16rem;
    }
    .theme-picker-fixed .font-picker-btn {
        font-size: 0.45rem;
        padding: 0.06rem 0.1rem;
    }
}
/* Floating panel stays usable even when sidebar is open */
body.sidebar-open .theme-picker-fixed {
    opacity: 1;
    pointer-events: auto;
    z-index: 120;
}



/* =========================================================
   Font faces (data-font on <html>)
   ========================================================= */
/* Site / web fonts */


.theme-rgb-picker {
  margin-top: 0.35rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--border-color, var(--c-border));
}
.theme-rgb-picker label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.7rem;
  color: var(--text-muted, var(--c-muted));
  margin-bottom: 0.2rem;
}

.theme-rgb-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.35rem;
}
.theme-rgb-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
}
.theme-rgb-color {
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid var(--border-color, var(--c-border));
  border-radius: 0.35rem;
  background: transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.theme-rgb-color::-webkit-color-swatch-wrapper { padding: 2px; }
.theme-rgb-color::-webkit-color-swatch {
  border: none;
  border-radius: 0.25rem;
}
.theme-rgb-color::-moz-color-swatch {
  border: none;
  border-radius: 0.25rem;
}
.theme-rgb-field {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.65rem;
  color: var(--text-muted, var(--c-muted));
  margin: 0 !important;
}
.theme-rgb-field input[type="number"] {
  width: 3.1rem;
  padding: 0.15rem 0.25rem;
  border: 1px solid var(--border-color, var(--c-border));
  border-radius: 0.25rem;
  background: var(--bg-mute, var(--c-surface));
  color: var(--text-main, var(--c-ink));
  font-size: 0.7rem;
}
.theme-rgb-picker .theme-rgb-preview {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  border: 1px solid var(--c-border);
  flex-shrink: 0;
}
.theme-picker-fixed.is-minimized > .theme-rgb-picker {
  display: none !important;
}
.theme-picker-btn[data-theme-set="custom"] .theme-swatch {
  background-image: linear-gradient(135deg, #f43f5e 0%, #eab308 45%, #0284C8 100%);
}
.font-size-picker {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border-color, var(--c-border));
}
.font-size-picker-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, var(--c-muted));
  margin-bottom: 0.25rem;
}
.font-size-picker-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.font-size-picker-row input[type="range"] {
  flex: 1;
  accent-color: var(--c-indigo);
}
.font-size-picker-value {
  min-width: 2.4rem;
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
  color: var(--text-main, var(--c-ink));
}
.font-picker {
  margin-top: 0.35rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--border-color, var(--c-border));
}
.font-picker-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted, var(--c-muted));
  margin-bottom: 0.25rem;
}
.font-picker-select {
  width: 100%;
  font-size: 0.78rem;
  padding: 0.35rem 0.45rem;
  border-radius: 6px;
  border: 1px solid var(--border-color, var(--c-border));
  background: var(--bg-card, var(--c-white));
  color: var(--text-main, var(--c-ink));
}
.theme-panel-chrome {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  margin-bottom: 0.35rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--border-color, var(--c-border));
}
.theme-panel-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-head, var(--c-indigo));
}
.theme-panel-chrome-actions {
  display: flex;
  gap: 0.25rem;
}
.theme-panel-chrome button {
  font-size: 0.65rem;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--border-color, var(--c-border));
  background: var(--bg-soft, var(--c-surface));
  color: var(--text-main, var(--c-ink));
  cursor: pointer;
}
.theme-panel-chrome button:hover {
  border-color: var(--c-sandy-gold);
}
.hx-ico { font-style: normal; font-weight: 700; }

/* ============================================================
   SITE-WIDE THEME+FONT APPLICATION
   Beat hardcoded colours in main.css / critical CSS so the
   picker restyles the whole page, not only the floating panel.
   ============================================================ */
html[data-theme] body {
  background-color: var(--c-paper) !important;
  background-image: radial-gradient(var(--c-border-light) 0.75px, transparent 0.75px) !important;
  background-size: 24px 24px !important;
  color: var(--c-ink) !important;
}
html[data-theme] .site-masthead {
  background: color-mix(in srgb, var(--c-paper) 96%, transparent) !important;
}
@supports not (background: color-mix(in srgb, white 50%, black)) {
  html[data-theme] .site-masthead {
    background: var(--c-paper) !important;
  }
}
html[data-theme] .site-header {
  background: linear-gradient(180deg, var(--c-white) 0%, var(--c-paper) 100%) !important;
  border-bottom-color: var(--c-gold-border) !important;
  box-shadow: inset 0 1px 0 var(--c-white) !important;
}
html[data-theme] .site-header::before {
  background: linear-gradient(90deg, var(--c-red) 0%, var(--c-sandy-gold) 38%, var(--c-blue-porcelain) 100%) !important;
}
html[data-theme] .site-main,
html[data-theme] .site-content,
html[data-theme] .content-area {
  background-color: transparent !important;
  color: var(--c-ink) !important;
}
html[data-theme] .site-footer,
html[data-theme] .site-footer__inner {
  background: var(--c-surface) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-border) !important;
}
html[data-theme] .hero-dispatch,
html[data-theme] .spotlight-card,
html[data-theme] .dispatch-card,
html[data-theme] .archive-tile,
html[data-theme] .archive-lattice__masthead,
html[data-theme] .entry-card,
html[data-theme] article.post,
html[data-theme] .single-post,
html[data-theme] .content-card,
html[data-theme] .wp-block-group,
html[data-theme] .search-panel {
  background-color: var(--c-white) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-gold-border) !important;
}
html[data-theme] .search-panel__input,
html[data-theme] input[type="search"],
html[data-theme] input[type="text"],
html[data-theme] input[type="email"],
html[data-theme] textarea {
  background-color: var(--c-white) !important;
  color: var(--c-ink) !important;
  border-color: var(--c-gold-border) !important;
}
html[data-theme] h1,
html[data-theme] h2,
html[data-theme] h3,
html[data-theme] h4,
html[data-theme] .section-title,
html[data-theme] .hero-dispatch__title,
html[data-theme] .entry-title {
  color: var(--text-head, var(--c-indigo)) !important;
}
html[data-theme] p,
html[data-theme] li,
html[data-theme] .entry-content,
html[data-theme] .hero-dispatch__excerpt {
  color: var(--c-ink);
}
html[data-theme] a {
  color: inherit;
}
html[data-theme] .nav__menu a,
html[data-theme] .site-brand,
html[data-theme] .nav__search-btn {
  color: var(--c-indigo) !important;
}
html[data-theme] .nav__search-btn {
  background: var(--c-white) !important;
  border-color: var(--c-gold-border) !important;
}
html[data-theme] .mobile-nav {
  background: var(--c-paper) !important;
  color: var(--c-ink) !important;
}
html[data-theme] .nav__hamburger span {
  background: var(--c-ink) !important;
}

/* Fonts: force chosen face across page chrome + article text */
html[data-font] body,
html[data-font] .site-main,
html[data-font] .entry-content,
html[data-font] .hero-dispatch,
html[data-font] .dispatch-card,
html[data-font] .spotlight-card,
html[data-font] .nav__menu,
html[data-font] .headline-bar,
html[data-font] p,
html[data-font] li,
html[data-font] a,
html[data-font] button,
html[data-font] input,
html[data-font] textarea,
html[data-font] select {
  font-family: var(--font-body) !important;
}
html[data-font] h1,
html[data-font] h2,
html[data-font] h3,
html[data-font] h4,
html[data-font] .section-title,
html[data-font] .hero-dispatch__title,
html[data-font] .entry-title,
html[data-font] .site-brand__tagline {
  font-family: var(--font-display) !important;
}
html[data-font] .seal-stamp,
html[data-font] .seal-stamp *,
html[data-font] .seal-text {
  font-family: var(--font-chinese, 'Noto Sans SC', 'PingFang SC', sans-serif) !important;
}