/* Kantha themes (Admin -> Branding). Each theme sets <html data-theme="...">
   plus data-header (dark | light) and data-hero (dark | light), listed in
   src/lib/brand.js THEMES. A theme changes colours, typefaces, corners,
   buttons, the header and the hero; the association's own colours (Branding)
   still win because they are set inline on <html>.
   System fonts only: every stack falls back to fonts on Windows, macOS,
   Android and iOS, so nothing is downloaded. */

/* ── Shared variants ─────────────────────────────────────────────────── */

/* Light header: white bar, dark menu, the theme colour as a top rule. */
html[data-header="light"] .site-header { background: var(--surface); color: var(--ink); box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(15, 23, 42, .06); }
html[data-header="light"] .site-header::before { background: var(--navy); }
html[data-header="light"] .brand, html[data-header="light"] .brand:hover { color: var(--navy-ink); }
html[data-header="light"] .brand-text span { color: var(--muted); }
html[data-header="light"] .brand-mark { background: transparent; box-shadow: none; padding: 0; }
html[data-header="light"] .nav-top { color: var(--ink); }
html[data-header="light"] .nav-top:hover, html[data-header="light"] .nav-item:focus-within > .nav-top, html[data-header="light"] .nav-item:hover > .nav-top { color: var(--navy); background: var(--surface-2); }
html[data-header="light"] .nav-top[aria-current="page"], html[data-header="light"] .nav-item.is-current > .nav-top { color: var(--navy); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 0; }
html[data-header="light"] .nav-actions > a:not(.btn), html[data-header="light"] .nav-actions .linklike { color: var(--ink); }
html[data-header="light"] .nav-actions > a:not(.btn):hover { color: var(--navy); background: var(--surface-2); }
html[data-header="light"] .nav-toggle { border-color: var(--line); color: var(--ink); }
@media (max-width: 1279px) {
  html[data-header="light"] .nav-top { border-bottom-color: var(--line-2); box-shadow: none; }
  html[data-header="light"] .mega a, html[data-header="light"] .mega .linklike { color: var(--ink); }
  html[data-header="light"] .mega h3, html[data-header="light"] .mega a small { color: var(--muted); }
  html[data-header="light"] .mega a:hover, html[data-header="light"] .mega a:focus-visible,
  html[data-header="light"] .mega .linklike:hover { background: var(--surface-2); color: var(--navy); }
  html[data-header="light"] .nav-actions { border-bottom-color: var(--line-2); }
}

/* Light hero: pale background, dark text, accent glow. */
html[data-hero="light"] .hero { color: var(--ink); background: radial-gradient(900px 480px at 85% 0%, color-mix(in srgb, var(--gold) 24%, transparent), transparent 62%), radial-gradient(700px 420px at 0% 100%, color-mix(in srgb, var(--navy) 10%, transparent), transparent 70%), linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); border-bottom: 1px solid var(--line); }
html[data-hero="light"] .hero::after { background-image: radial-gradient(color-mix(in srgb, var(--navy) 12%, transparent) 1px, transparent 1px); }
html[data-hero="light"] .hero h1 { color: var(--navy-ink); }
html[data-hero="light"] .hero h1 em { color: var(--navy); }
html[data-hero="light"] .hero p.lead { color: var(--muted); }
html[data-hero="light"] .hero .eyebrow { color: var(--gold-ink); }
html[data-hero="light"] .hero .btn-outline-light { border-color: var(--navy); color: var(--navy); }
html[data-hero="light"] .hero .btn-outline-light:hover { background: var(--navy); color: #fff; }
html[data-hero="light"] .hero .stats { background: var(--line); border-color: var(--line); }
html[data-hero="light"] .hero .stat { background: var(--surface); backdrop-filter: none; }
html[data-hero="light"] .hero .stat-num { color: var(--navy); }
html[data-hero="light"] .hero .stat-label { color: var(--muted); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) { color: var(--ink); background: radial-gradient(900px 380px at 90% -20%, color-mix(in srgb, var(--gold) 20%, transparent), transparent 60%), var(--surface-2); border-bottom: 1px solid var(--line); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) h1 { color: var(--navy-ink); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) p { color: var(--muted); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) .eyebrow { color: var(--gold-ink); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) .crumbs { color: var(--muted); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) .crumbs a { color: var(--navy); }
html[data-hero="light"] .page-hero:not(.page-hero-accent) .btn-outline-light { border-color: var(--navy); color: var(--navy); }

/* ── 2. Oxford: crimson and stone, old-style serif, square corners ───── */
html[data-theme="oxford"] {
  --navy: #8c1d2c; --navy-2: #a32638; --navy-3: #6e1622; --navy-ink: #2b0d12;
  --gold: #c8a96a; --gold-2: #dcc390; --gold-3: #b08f4c; --gold-ink: #7a5a1c;
  --blue: #8c1d2c; --blue-2: #8c1d2c; --blue-3: #6e1622;
  --bg: #f7f4ef; --surface: #ffffff; --surface-2: #f0ebe3; --ink: #231a17; --muted: #6b5f58; --line: #e2d9cc; --line-2: #ece5da;
  --accent: var(--navy); --radius: 4px; --radius-sm: 3px;
  --serif: Garamond, "EB Garamond", "Cormorant Garamond", Baskerville, "Baskerville Old Face", "Hoefler Text", "Times New Roman", serif;
  --font: "Gill Sans", "Gill Sans MT", Calibri, "Segoe UI", system-ui, sans-serif;
  --shadow-sm: 0 1px 2px rgba(43, 13, 18, .06); --shadow: 0 4px 14px rgba(43, 13, 18, .08); --shadow-lg: 0 18px 40px rgba(43, 13, 18, .14);
}
html[data-theme="oxford"] .btn { border-radius: 2px; letter-spacing: .04em; text-transform: uppercase; font-size: .82rem; }
html[data-theme="oxford"] .btn-gold { background: var(--navy); border-color: var(--navy); color: #fff; }
html[data-theme="oxford"] .btn-gold:hover { background: var(--navy-3); border-color: var(--navy-3); color: #fff; }
html[data-theme="oxford"] h1, html[data-theme="oxford"] h2 { font-weight: 600; letter-spacing: 0; }
html[data-theme="oxford"] .hero h1 { font-style: italic; font-weight: 500; }
html[data-theme="oxford"] .card { box-shadow: none; }
html[data-theme="oxford"] .eyebrow { letter-spacing: .22em; }
html[data-theme="oxford"] .site-footer { background: #2b0d12; }

/* ── 3. Ivy: forest green and brass, classic collegiate ──────────────── */
html[data-theme="ivy"] {
  --navy: #14432f; --navy-2: #1d5c41; --navy-3: #0f3324; --navy-ink: #0a2218;
  --gold: #c9a227; --gold-2: #dcbc55; --gold-3: #a8861c; --gold-ink: #6f5510;
  --blue: #1d5c41; --blue-2: #1d6b48; --blue-3: #14432f;
  --bg: #f5f3ea; --surface: #fffdf7; --surface-2: #ece8da; --ink: #1c2420; --muted: #5a6560; --line: #dcd6c3; --line-2: #e7e2d2;
  --accent: var(--navy); --radius: 8px; --radius-sm: 6px;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
html[data-theme="ivy"] .btn { border-radius: 6px; }
html[data-theme="ivy"] .hero h1 em, html[data-theme="ivy"] .stat-num { color: var(--gold-2); }
html[data-theme="ivy"] .site-header::before { height: 4px; background: repeating-linear-gradient(90deg, var(--gold) 0 18px, var(--navy-2) 18px 24px); }

/* ── 4. Modern: white, ink and electric blue, geometric sans ─────────── */
html[data-theme="modern"] {
  --navy: #2952e3; --navy-2: #3b63f0; --navy-3: #1e40c4; --navy-ink: #0b1220;
  --gold: #2952e3; --gold-2: #6d8cff; --gold-3: #1e40c4; --gold-ink: #2343c4;
  --blue: #2952e3; --blue-2: #2952e3; --blue-3: #1e40c4;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f3f5fb; --ink: #0b1220; --muted: #5b6478; --line: #e4e8f1; --line-2: #eef1f7;
  --accent: var(--navy); --radius: 18px; --radius-sm: 12px;
  --serif: "Avenir Next", Avenir, Montserrat, "Century Gothic", "Segoe UI", system-ui, sans-serif;
  --font: "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, .04); --shadow: 0 10px 30px rgba(41, 82, 227, .10); --shadow-lg: 0 24px 60px rgba(11, 18, 32, .14);
}
html[data-theme="modern"] h1, html[data-theme="modern"] h2 { font-weight: 800; letter-spacing: -.025em; }
html[data-theme="modern"] .hero h1 { font-size: clamp(2.4rem, 1.4rem + 4.2vw, 4.4rem); }
html[data-theme="modern"] .btn-gold { color: #fff; }
html[data-theme="modern"] .btn-gold:hover { color: #fff; }
html[data-theme="modern"] .eyebrow { letter-spacing: .08em; font-weight: 800; }
html[data-theme="modern"] .site-header::before { height: 0; }
html[data-theme="modern"] .card { border-color: transparent; box-shadow: 0 1px 0 var(--line), 0 6px 24px rgba(11, 18, 32, .06); }
html[data-theme="modern"] .section-alt { background: var(--surface-2); }
html[data-theme="modern"] .site-footer { background: #0b1220; }

/* ── 5. Midnight: dark mode with aqua accents ────────────────────────── */
html[data-theme="midnight"] {
  color-scheme: dark;
  --navy: #0e1528; --navy-2: #16203a; --navy-3: #1d2a4a; --navy-ink: #f1f4fb;
  --gold: #2dd4bf; --gold-2: #5eead4; --gold-3: #14b8a6; --gold-ink: #5eead4;
  --blue: #5eead4; --blue-2: #38bdf8; --blue-3: #7dd3fc;
  --bg: #0a0f1d; --surface: #121a2e; --surface-2: #1a2440; --ink: #e6e9f2; --muted: #9aa5bf; --line: #26314f; --line-2: #1f2944;
  --ok-bg: #0f2a22; --err-bg: #2d1416; --info-bg: #13213d; --meet-bg: #221a3d;
  --accent: #16203a; --radius: 14px; --radius-sm: 10px;
  --serif: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 6px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 20px 50px rgba(0, 0, 0, .6);
  --focus: 0 0 0 3px #0a0f1d, 0 0 0 5px #5eead4;
}
html[data-theme="midnight"] .btn { color: #06201c; background: var(--gold); border-color: var(--gold); }
html[data-theme="midnight"] .btn:hover { color: #06201c; background: var(--gold-2); border-color: var(--gold-2); }
html[data-theme="midnight"] .btn-ghost, html[data-theme="midnight"] .btn-outline-light { background: transparent; color: var(--gold-2); border-color: var(--gold-3); }
html[data-theme="midnight"] .btn-light { background: var(--surface-2); border-color: var(--surface-2); color: var(--ink); }
html[data-theme="midnight"] h1, html[data-theme="midnight"] h2 { font-weight: 750; letter-spacing: -.02em; }
html[data-theme="midnight"] .mega, html[data-theme="midnight"] .pills a, html[data-theme="midnight"] .pager a, html[data-theme="midnight"] .pager span,
html[data-theme="midnight"] .map-panel, html[data-theme="midnight"] .cal, html[data-theme="midnight"] .doc, html[data-theme="midnight"] .chat-list,
html[data-theme="midnight"] .chat-box, html[data-theme="midnight"] .auth-card, html[data-theme="midnight"] .stats-light .stat,
html[data-theme="midnight"] input[type="text"], html[data-theme="midnight"] input[type="email"], html[data-theme="midnight"] input[type="password"],
html[data-theme="midnight"] input[type="number"], html[data-theme="midnight"] input[type="url"], html[data-theme="midnight"] input[type="tel"],
html[data-theme="midnight"] input[type="search"], html[data-theme="midnight"] input[type="date"], html[data-theme="midnight"] select, html[data-theme="midnight"] textarea {
  background-color: var(--surface); color: var(--ink); border-color: var(--line);
}
html[data-theme="midnight"] .cal td.out { background: #0e1528; }
html[data-theme="midnight"] .cal td.today { background: #10302c; }
html[data-theme="midnight"] .chat-list a:hover { background: var(--surface-2); }
html[data-theme="midnight"] .chapter-links a[aria-current="page"] { background: var(--gold); color: #06201c; }
html[data-theme="midnight"] .alert-success { color: #86efac; border-color: #1f5a3f; }
html[data-theme="midnight"] .alert-error { color: #fca5a5; border-color: #6b2228; }
html[data-theme="midnight"] .alert-info { color: #93c5fd; border-color: #1f3b6b; }
html[data-theme="midnight"] .alert-gold, html[data-theme="midnight"] .benefit-code code { background: #2a2210; color: #fde68a; border-color: #5c4a1a; }
html[data-theme="midnight"] .badge-public { background: #13213d; color: #93c5fd; }
html[data-theme="midnight"] .badge-members, html[data-theme="midnight"] .badge-pending { background: #2a2210; color: #fde68a; border-color: #5c4a1a; }
html[data-theme="midnight"] .brand-mark { background: #0a0f1d; }
html[data-theme="midnight"] .card-link:hover { border-color: var(--gold-3); }
html[data-theme="midnight"] .site-footer { background: #070b16; }
html[data-theme="midnight"] .demo-ribbon { background: #10302c; color: #ccfbf1; border-color: #134e4a; }

/* ── 6. Coastal: deep teal and coral, soft rounded shapes ────────────── */
html[data-theme="coastal"] {
  --navy: #0f5257; --navy-2: #13696f; --navy-3: #0b3f43; --navy-ink: #072b2e;
  --gold: #ff7a5c; --gold-2: #ff9a80; --gold-3: #f0603f; --gold-ink: #b3401f;
  --blue: #13696f; --blue-2: #0f7c83; --blue-3: #0b5d62;
  --bg: #f2f8f7; --surface: #ffffff; --surface-2: #e4f1ef; --ink: #13292b; --muted: #557073; --line: #d3e6e3; --line-2: #e2efed;
  --accent: var(--navy); --radius: 22px; --radius-sm: 14px;
  --serif: Optima, Candara, "Gill Sans", "Gill Sans MT", "Trebuchet MS", "Segoe UI", sans-serif;
  --font: Candara, Optima, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
html[data-theme="coastal"] .btn-gold { color: #fff; }
html[data-theme="coastal"] .btn-gold:hover { color: #fff; }
html[data-theme="coastal"] h1, html[data-theme="coastal"] h2 { font-weight: 700; letter-spacing: -.01em; }
html[data-theme="coastal"] .site-header::before { height: 4px; background: linear-gradient(90deg, var(--gold), #ffd166, var(--blue-2)); }
html[data-theme="coastal"] .hero { background: radial-gradient(900px 500px at 85% 0%, rgba(255, 122, 92, .35), transparent 60%), linear-gradient(160deg, #072b2e 0%, var(--navy) 50%, #1a8a8f 100%); }
html[data-theme="coastal"] .card { border-color: transparent; box-shadow: 0 8px 24px rgba(15, 82, 87, .08); }

/* ── 7. Royal: deep purple and gold ─────────────────────────────────── */
html[data-theme="royal"] {
  --navy: #3b1f6e; --navy-2: #4f2a91; --navy-3: #2d1754; --navy-ink: #1b0d36;
  --gold: #e0b13c; --gold-2: #f0c95e; --gold-3: #c7972a; --gold-ink: #7d5a0e;
  --blue: #5b34a6; --blue-2: #5b34a6; --blue-3: #3b1f6e;
  --bg: #f7f5fb; --surface: #ffffff; --surface-2: #efeaf7; --ink: #1f1830; --muted: #625a75; --line: #e1d9ee; --line-2: #ebe5f4;
  --accent: var(--navy); --radius: 12px; --radius-sm: 8px;
  --serif: Didot, "Bodoni MT", "Bodoni 72", "Playfair Display", Georgia, serif;
}
html[data-theme="royal"] h1, html[data-theme="royal"] h2 { font-weight: 700; letter-spacing: .005em; }
html[data-theme="royal"] .hero { background: radial-gradient(1000px 520px at 80% 0%, rgba(224, 177, 60, .3), transparent 60%), linear-gradient(160deg, #1b0d36 0%, var(--navy) 55%, #6a3fb5 100%); }
html[data-theme="royal"] .site-footer { background: #1b0d36; }

/* ── 8. Terracotta: warm sand and burnt orange, slab headings ───────── */
html[data-theme="terracotta"] {
  --navy: #9a3412; --navy-2: #b8461d; --navy-3: #7c2a0e; --navy-ink: #2e1408;
  --gold: #e9a23b; --gold-2: #f2bd66; --gold-3: #cf8a24; --gold-ink: #8a4f06;
  --blue: #9a3412; --blue-2: #a63c16; --blue-3: #7c2a0e;
  --bg: #faf5ee; --surface: #fffdf9; --surface-2: #f3e9dc; --ink: #2b1d14; --muted: #74604f; --line: #e7d8c5; --line-2: #efe4d6;
  --accent: var(--navy); --radius: 6px; --radius-sm: 4px;
  --serif: Rockwell, "Roboto Slab", "Courier New", Georgia, serif;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
html[data-theme="terracotta"] .btn { border-radius: 6px; }
html[data-theme="terracotta"] .btn-gold { background: var(--navy); border-color: var(--navy); color: #fff; }
html[data-theme="terracotta"] .btn-gold:hover { background: var(--navy-3); border-color: var(--navy-3); color: #fff; }
html[data-theme="terracotta"] h1, html[data-theme="terracotta"] h2 { font-weight: 700; letter-spacing: -.01em; }
html[data-theme="terracotta"] .card { box-shadow: 0 2px 0 var(--line); }
html[data-theme="terracotta"] .site-footer { background: #2e1408; }

/* ── 9. Editorial: black and white, big serif headlines, a red accent ── */
html[data-theme="editorial"] {
  --navy: #111111; --navy-2: #222222; --navy-3: #000000; --navy-ink: #0a0a0a;
  --gold: #d7263d; --gold-2: #e8576a; --gold-3: #b81d31; --gold-ink: #b81d31;
  --blue: #111111; --blue-2: #111111; --blue-3: #d7263d;
  --bg: #ffffff; --surface: #ffffff; --surface-2: #f4f4f2; --ink: #111111; --muted: #5c5c5c; --line: #dddddd; --line-2: #ececec;
  --accent: var(--navy); --radius: 0; --radius-sm: 0;
  --serif: "Times New Roman", Times, "Liberation Serif", Georgia, serif;
  --font: "Helvetica Neue", Helvetica, Arial, "Segoe UI", sans-serif;
  --shadow-sm: none; --shadow: none; --shadow-lg: 0 12px 30px rgba(0, 0, 0, .12);
}
html[data-theme="editorial"] .btn { border-radius: 0; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; }
html[data-theme="editorial"] .btn-gold { color: #fff; }
html[data-theme="editorial"] .btn-gold:hover { color: #fff; }
html[data-theme="editorial"] h1, html[data-theme="editorial"] h2 { font-weight: 700; letter-spacing: -.02em; }
html[data-theme="editorial"] .hero h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5rem); max-width: 18ch; }
html[data-theme="editorial"] .hero h1 em { color: var(--gold); font-style: italic; }
html[data-theme="editorial"] .card { border-color: var(--ink); border-width: 0 0 1px; }
html[data-theme="editorial"] .site-header::before { height: 6px; background: var(--ink); }
html[data-theme="editorial"] .section-head { border-top: 3px solid var(--ink); padding-top: .9rem; }
html[data-theme="editorial"] .eyebrow { color: var(--gold-ink); letter-spacing: .2em; }

/* Midnight: --navy-ink is the light heading colour there, so the places that
   use it as a dark background get their own. */
html[data-theme="midnight"] .hero { background: radial-gradient(1000px 500px at 80% 0%, rgba(45, 212, 191, .18), transparent 60%), radial-gradient(700px 400px at 0% 100%, rgba(56, 189, 248, .12), transparent 70%), linear-gradient(160deg, #070b16 0%, #0e1528 55%, #16203a 100%); }
html[data-theme="midnight"] .cta-band { background: radial-gradient(700px 300px at 100% 0%, rgba(45, 212, 191, .25), transparent 60%), linear-gradient(135deg, #070b16, #16203a); }
html[data-theme="midnight"] .feed-media-photo { background: #070b16; }
html[data-theme="midnight"] .cookie-note { background: #16203a; color: var(--ink); border: 1px solid var(--line); }
html[data-theme="midnight"] .id-card { background: linear-gradient(135deg, #070b16, #16203a 60%, #134e4a); }
html[data-theme="midnight"] .skip { color: #06201c; }
html[data-theme="editorial"] .page-hero-accent .eyebrow { color: #fff; }

/* World map: land and covered countries follow the theme instead of the
   fixed Heritage blue and gold. */
html[data-theme]:not([data-theme="classic"]) .map-country { fill: color-mix(in srgb, #ffffff 22%, var(--navy)); stroke: color-mix(in srgb, #000000 25%, var(--navy)); }
html[data-theme]:not([data-theme="classic"]) .map-country.on { fill: var(--gold); fill-opacity: .8; stroke: var(--gold-3); }
html[data-theme]:not([data-theme="classic"]) .map-country.home { fill: #ffffff; fill-opacity: .92; stroke: var(--gold-3); }
html[data-theme="midnight"] .map-country { fill: #1d2a4a; stroke: #0a0f1d; }
html[data-theme="midnight"] .map-country.home { fill: #e6e9f2; }
html[data-theme="editorial"] .map-country { fill: #3a3a3a; stroke: #111111; }
html[data-theme="modern"] .map-country.on { fill: #ffffff; fill-opacity: .9; stroke: #1e40c4; }
html[data-theme="modern"] .map-country.home { fill: #ffd84d; }
html[data-theme]:not([data-theme="classic"]) .map-legend .lg-home::before { background: #ffffff; outline: 1px solid var(--gold-3); }
html[data-theme]:not([data-theme="classic"]) .map-legend .lg-on::before { background: var(--gold); }
html[data-theme]:not([data-theme="classic"]) .map-legend .lg-off::before { background: color-mix(in srgb, #ffffff 22%, var(--navy)); }
html[data-theme="midnight"] .map-legend .lg-home::before { background: #e6e9f2; }
html[data-theme="midnight"] .map-legend .lg-off::before { background: #1d2a4a; }
html[data-theme="editorial"] .map-legend .lg-off::before { background: #3a3a3a; }
html[data-theme="modern"] .map-legend .lg-on::before { background: #ffffff; outline: 1px solid #1e40c4; }
html[data-theme="modern"] .map-legend .lg-home::before { background: #ffd84d; }
html[data-theme="modern"] .map-country { fill: #1a3aa8; stroke: #0f2a85; }
html[data-theme="modern"] .map-country.on { fill-opacity: 1; }
html[data-theme="modern"] .map-legend .lg-off::before { background: #1a3aa8; }