/* Theme variables + light/dark system for the public site.
   Light values live on :root; dark overrides on [data-theme="dark"].
   The .bg-th-* / text-th-* classes bridge these variables into markup
   alongside Tailwind CDN utilities (no build step, so no tailwind.config). */

:root {
    --color-bg-page: #f8fafc;
    --color-bg-surface: #ffffff;
    --color-bg-header: rgba(255, 255, 255, 0.92);
    --color-bg-footer: #e2e8f0;
    --color-text-primary: #1e293b;
    --color-text-secondary: #475569;
    --color-text-muted: #64748b;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-primary: #57534e;
    --color-primary-hover: #44403c;
    --color-primary-light: #e7e5e4;
    --color-primary-text: #ffffff;
    --color-heading: #0f172a;
    --color-bg-accent: #f5f5f4;
    --color-bg-muted: #eef2f7;

    /* Semantic UI-state colors. Independent of the brand color — used for
       success/warning/error feedback so brand color changes never
       accidentally recolor status messaging, and vice versa. */
    --color-success: #16a34a;
    --color-success-light: #dcfce7;
    --color-warning: #f59e0b;
    --color-warning-light: #fef3c7;
    --color-error: #dc2626;
    --color-error-light: #fee2e2;

    /* Sparingly-used accent for featured/highlight callouts (badges,
       "editor's pick", milestones). Not a brand color — never a
       substitute for --color-primary. */
    --color-accent-gold: #ca8a04;

    /* Deep brand-color "panel" surface — a saturated block of brand color dropped on
       top of the white/page background (hero, mid-page CTAs, highlight card
       trios) so the page reads as layered color-on-white rather than a flat
       sheet. Independent of light/dark mode: it's meant to read the same
       saturated way in both, so it uses fixed values rather than page tokens. */
    --color-panel-dark: #292524;
    --color-panel-dark-strong: #1c1917;
    --color-panel-dark-text: #fafaf9;
    --color-panel-dark-text-muted: rgba(250, 250, 249, 0.72);
    --color-panel-dark-border: rgba(250, 250, 249, 0.14);
    /* Highlight color for <em> / accents on the dark panel. */
    --color-panel-dark-accent: #e7e5e4;

    /* Display serif used for large headings only (h1 / non-label h2) —
       everything else stays on the sans body stack. */
    --font-display: 'Newsreader', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
    --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    --pattern-opacity: 0.05;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08);
    --shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 20px 45px rgba(15, 23, 42, 0.16);
}

[data-theme="dark"] {
    --color-bg-page: #0f172a;
    --color-bg-surface: #1e293b;
    --color-bg-header: rgba(15, 23, 42, 0.92);
    --color-bg-footer: #1e293b;
    --color-text-primary: #e2e8f0;
    --color-text-secondary: #cbd5e1;
    --color-text-muted: #94a3b8;
    --color-border: #334155;
    --color-border-light: #1e293b;
    --color-primary: #d6d3d1;
    --color-primary-hover: #e7e5e4;
    --color-primary-light: #44403c;
    --color-primary-text: #1c1917;
    --color-heading: #f8fafc;
    --color-bg-accent: #262321;
    --color-bg-muted: #16213a;

    --color-success: #22c55e;
    --color-success-light: #14532d;
    --color-warning: #fbbf24;
    --color-warning-light: #78350f;
    --color-error: #ef4444;
    --color-error-light: #7f1d1d;

    --color-accent-gold: #fbbf24;

    /* Slightly lighter than the light-mode panel so it still separates from
       the near-black dark-mode page background instead of vanishing into it. */
    --color-panel-dark: #34302c;
    --color-panel-dark-strong: #24211e;
    --color-panel-dark-text: #fafaf9;
    --color-panel-dark-text-muted: rgba(250, 250, 249, 0.72);
    --color-panel-dark-border: rgba(250, 250, 249, 0.14);
    --color-panel-dark-accent: #e7e5e4;

    --pattern-opacity: 0.08;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 10px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 20px 45px rgba(0, 0, 0, 0.6);
}

/* Tailwind bridge: themed color utilities used in templates.
   [data-theme="dark"] .class outranks Tailwind's single-class selectors,
   so dark mode wins without !important. */
.bg-th-page { background-color: var(--color-bg-page); }
.bg-th-surface { background-color: var(--color-bg-surface); }
.bg-th-accent { background-color: var(--color-bg-accent); }
.bg-th-muted { background-color: var(--color-bg-muted); }
.bg-th-header { background-color: var(--color-bg-header); }
.bg-th-footer { background-color: var(--color-bg-footer); }
.text-th-text { color: var(--color-text-primary); }
.text-th-secondary { color: var(--color-text-secondary); }
.text-th-muted { color: var(--color-text-muted); }
.text-th-heading { color: var(--color-heading); }
.border-th { border-color: var(--color-border); }
.border-th-light { border-color: var(--color-border-light); }

/* Semantic UI-state bridge classes. */
.text-th-success { color: var(--color-success); }
.bg-th-success-light { background-color: var(--color-success-light); }
.text-th-warning { color: var(--color-warning); }
.bg-th-warning-light { background-color: var(--color-warning-light); }
.text-th-error { color: var(--color-error); }
.bg-th-error-light { background-color: var(--color-error-light); }
.text-th-gold { color: var(--color-accent-gold); }

/* ---- Dark panel: saturated brand-color block dropped on the white page.
   Self-contained (fixed colors, not page tokens) so it reads the same way
   regardless of light/dark mode — see --color-panel-dark above. Includes a
   faint dot-grid texture and swaps heading/body/link colors for contrast. ---- */
.panel-dark {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: linear-gradient(155deg, var(--color-panel-dark), var(--color-panel-dark-strong));
    color: var(--color-panel-dark-text-muted);
}

.panel-dark::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, color-mix(in srgb, var(--color-panel-dark-text) 50%, transparent) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.08;
    pointer-events: none;
}

.panel-dark h1, .panel-dark h2, .panel-dark h3, .panel-dark h4,
.panel-dark strong { color: var(--color-panel-dark-text); }

.panel-dark em { color: var(--color-panel-dark-accent); font-style: italic; }

[data-theme="dark"] .bg-th-page { background-color: var(--color-bg-page); }
[data-theme="dark"] .bg-th-surface { background-color: var(--color-bg-surface); }
[data-theme="dark"] .bg-th-accent { background-color: var(--color-bg-accent); }
[data-theme="dark"] .bg-th-muted { background-color: var(--color-bg-muted); }
[data-theme="dark"] .bg-th-header { background-color: var(--color-bg-header); }
[data-theme="dark"] .bg-th-footer { background-color: var(--color-bg-footer); }
[data-theme="dark"] .text-th-text { color: var(--color-text-primary); }
[data-theme="dark"] .text-th-secondary { color: var(--color-text-secondary); }
[data-theme="dark"] .text-th-muted { color: var(--color-text-muted); }
[data-theme="dark"] .text-th-heading { color: var(--color-heading); }
[data-theme="dark"] .border-th { border-color: var(--color-border); }
[data-theme="dark"] .border-th-light { border-color: var(--color-border-light); }
[data-theme="dark"] .text-th-success { color: var(--color-success); }
[data-theme="dark"] .bg-th-success-light { background-color: var(--color-success-light); }
[data-theme="dark"] .text-th-warning { color: var(--color-warning); }
[data-theme="dark"] .bg-th-warning-light { background-color: var(--color-warning-light); }
[data-theme="dark"] .text-th-error { color: var(--color-error); }
[data-theme="dark"] .bg-th-error-light { background-color: var(--color-error-light); }
[data-theme="dark"] .text-th-gold { color: var(--color-accent-gold); }

/* Smooth theme transitions, suppressed on first paint (anti-FOUC).
   theme.js removes .no-transitions after the first frame. */
body,
.bg-th-page, .bg-th-surface, .bg-th-header, .bg-th-footer, .bg-th-accent, .bg-th-muted,
.text-th-text, .text-th-secondary, .text-th-muted, .text-th-heading,
.border-th, .border-th-light,
.text-th-success, .bg-th-success-light, .text-th-warning, .bg-th-warning-light,
.text-th-error, .bg-th-error-light, .text-th-gold {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.no-transitions *,
.no-transitions *::before,
.no-transitions *::after {
    transition: none !important;
}