/* ============================================
   Theme System — CSS Custom Properties
   Three themes: editorial (default), executive, slate
   ============================================ */

/* --- EDITORIAL (dark teal gradient, glass cards) --- */
[data-theme="editorial"],
:root {
    --theme-bg: #060F0E;
    --theme-surface: rgba(255, 255, 255, 0.12);
    --theme-border: rgba(255, 255, 255, 0.16);
    --theme-text: #E8EDEC;
    --theme-text-muted: #9BADA8;
    --theme-text-subtle: #5E7A75;
    --theme-heading-font: 'Playfair Display', Georgia, serif;
    --theme-body-font: 'Outfit', system-ui, sans-serif;
    --theme-input-bg: rgba(255, 255, 255, 0.06);
    --theme-card-bg: rgba(255, 255, 255, 0.10);
    --theme-blockquote-bg: rgba(255, 255, 255, 0.08);
    --theme-footer-border: rgba(255, 255, 255, 0.08);
    --theme-selection-bg: rgba(45, 212, 168, 0.3);
    --theme-selection-text: #ffffff;
    --theme-shadow: 0 4px 24px rgba(0, 0, 0, 0.3);
    --theme-radius: 16px;
    --theme-input-radius: 10px;
    --accent-glow: rgba(16, 85, 77, 0.25);
    --accent-glow-secondary: rgba(16, 85, 77, 0.12);
    --accent-teal: #2DD4A8;
    --accent-teal-muted: rgba(45, 212, 168, 0.1);
    --gradient-start: #060F0E;
    --gradient-mid: #0A2A25;
    --gradient-end: #0D3B35;
}

/* --- EXECUTIVE (dark, commanding, high-contrast) --- */
[data-theme="executive"] {
    --theme-bg: #0C0C0E;
    --theme-surface: #18181B;
    --theme-border: #27272A;
    --theme-text: #FAFAFA;
    --theme-text-muted: #A1A1AA;
    --theme-text-subtle: #71717A;
    --theme-heading-font: 'Outfit', system-ui, sans-serif;
    --theme-body-font: 'Outfit', system-ui, sans-serif;
    --theme-input-bg: #18181B;
    --theme-card-bg: #18181B;
    --theme-blockquote-bg: #18181B;
    --theme-footer-border: #27272A;
    --theme-selection-bg: var(--brand-primary);
    --theme-selection-text: #ffffff;
    --theme-shadow: 0 1px 3px rgba(0,0,0,0.3);
    --theme-radius: 16px;
    --theme-input-radius: 10px;
    --accent-glow: rgba(16, 85, 77, 0.12);
    --accent-glow-secondary: rgba(16, 85, 77, 0.06);
    --accent-teal: #2DD4A8;
    --accent-teal-muted: rgba(45, 212, 168, 0.08);
}

/* --- SLATE (professional, cool grays, clean sans-serif) --- */
[data-theme="slate"] {
    --theme-bg: #F8FAFC;
    --theme-surface: #ffffff;
    --theme-border: #E2E8F0;
    --theme-text: #0F172A;
    --theme-text-muted: #64748B;
    --theme-text-subtle: #94A3B8;
    --theme-heading-font: 'Outfit', system-ui, sans-serif;
    --theme-body-font: 'Outfit', system-ui, sans-serif;
    --theme-input-bg: #ffffff;
    --theme-card-bg: #ffffff;
    --theme-blockquote-bg: #F8FAFC;
    --theme-footer-border: #E2E8F0;
    --theme-selection-bg: var(--brand-primary-ring);
    --theme-selection-text: #0F172A;
    --theme-shadow: 0 1px 2px rgba(15,23,42,0.06);
    --theme-radius: 8px;
    --theme-input-radius: 8px;
    --accent-glow: rgba(16, 85, 77, 0.05);
    --accent-glow-secondary: rgba(16, 85, 77, 0.025);
    --accent-teal: #0F766E;
    --accent-teal-muted: rgba(15, 118, 110, 0.06);
}

/* ============================================
   Apply theme variables to base elements
   ============================================ */

body {
    background: linear-gradient(145deg, var(--gradient-start, var(--theme-bg)) 0%, var(--gradient-mid, var(--theme-bg)) 40%, var(--gradient-end, var(--theme-bg)) 100%) !important;
    background-attachment: fixed !important;
    color: var(--theme-text) !important;
    font-family: var(--theme-body-font) !important;
    min-height: 100vh;
}

::selection {
    background-color: var(--theme-selection-bg) !important;
    color: var(--theme-selection-text) !important;
}

/* Glass card */
.glass-card {
    background: var(--theme-card-bg) !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    border: 1px solid var(--theme-border) !important;
    border-radius: var(--theme-radius) !important;
    box-shadow: var(--theme-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Form inputs */
.form-input {
    background-color: var(--theme-input-bg) !important;
    border: 1px solid var(--theme-border) !important;
    color: var(--theme-text) !important;
    border-radius: var(--theme-input-radius) !important;
}

.form-input::placeholder {
    color: var(--theme-text-subtle) !important;
}

.form-input:focus {
    border-color: var(--accent-teal) !important;
    box-shadow: 0 0 0 3px rgba(45, 212, 168, 0.15) !important;
}

/* ============================================
   Landing prose — theme-aware overrides
   ============================================ */

.landing-prose.landing-prose h1,
.landing-prose.landing-prose h2,
.landing-prose.landing-prose h3 {
    font-family: var(--theme-heading-font) !important;
    color: var(--theme-text) !important;
}

.landing-prose.landing-prose p {
    color: var(--theme-text-muted) !important;
}

.landing-prose.landing-prose strong {
    color: var(--theme-text) !important;
}

.landing-prose.landing-prose blockquote {
    background: var(--theme-blockquote-bg) !important;
    border-color: var(--theme-border) !important;
    border-radius: var(--theme-radius) !important;
}

.landing-prose.landing-prose blockquote p,
.landing-prose.landing-prose blockquote li {
    color: var(--theme-text-muted) !important;
}

.landing-prose.landing-prose blockquote strong {
    color: var(--theme-text) !important;
}

.landing-prose.landing-prose hr {
    border-color: var(--theme-border) !important;
}

.landing-prose.landing-prose li {
    color: var(--theme-text-muted) !important;
}

/* Editorial (dark) — specific overrides */
[data-theme="editorial"] label,
[data-theme="editorial"] legend {
    color: var(--theme-text) !important;
}

[data-theme="editorial"] input[type="checkbox"],
[data-theme="editorial"] input[type="radio"] {
    border-color: var(--theme-border) !important;
    background-color: rgba(255, 255, 255, 0.06) !important;
}

[data-theme="editorial"] select option {
    background-color: #0A2A25;
    color: var(--theme-text);
}

/* ============================================
   Staggered form field reveals
   ============================================ */

@keyframes fieldReveal {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.form-field-wrap {
    animation: fieldReveal 400ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.form-field-wrap:nth-child(1)  { animation-delay: 100ms; }
.form-field-wrap:nth-child(2)  { animation-delay: 150ms; }
.form-field-wrap:nth-child(3)  { animation-delay: 200ms; }
.form-field-wrap:nth-child(4)  { animation-delay: 250ms; }
.form-field-wrap:nth-child(5)  { animation-delay: 300ms; }
.form-field-wrap:nth-child(6)  { animation-delay: 350ms; }
.form-field-wrap:nth-child(7)  { animation-delay: 400ms; }
.form-field-wrap:nth-child(8)  { animation-delay: 450ms; }
.form-field-wrap:nth-child(9)  { animation-delay: 500ms; }
.form-field-wrap:nth-child(10) { animation-delay: 550ms; }
.form-field-wrap:nth-child(n+11) { animation-delay: 600ms; }

/* ============================================
   Executive theme — specific overrides
   ============================================ */

[data-theme="executive"] .field-section-card {
    background: var(--theme-surface);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-radius);
    padding: 2rem;
}

[data-theme="executive"] label,
[data-theme="executive"] legend {
    color: var(--theme-text) !important;
}

[data-theme="executive"] .text-neutral-text {
    color: var(--theme-text) !important;
}

[data-theme="executive"] .text-neutral-text-muted {
    color: var(--theme-text-muted) !important;
}

[data-theme="executive"] .border-neutral-border {
    border-color: var(--theme-border) !important;
}

[data-theme="executive"] .bg-neutral-bg {
    background-color: var(--theme-bg) !important;
}

[data-theme="executive"] .bg-white {
    background-color: var(--theme-surface) !important;
}

[data-theme="executive"] footer {
    border-color: var(--theme-footer-border) !important;
}

[data-theme="executive"] .group-hover\:text-neutral-text:hover {
    color: var(--theme-text) !important;
}

/* Checkbox/radio styling in dark mode */
[data-theme="executive"] input[type="checkbox"],
[data-theme="executive"] input[type="radio"] {
    border-color: var(--theme-border) !important;
    background-color: var(--theme-surface) !important;
}

[data-theme="executive"] select option {
    background-color: var(--theme-surface);
    color: var(--theme-text);
}

/* ============================================
   Slate theme — specific overrides
   ============================================ */

[data-theme="slate"] label,
[data-theme="slate"] legend {
    color: var(--theme-text) !important;
}

[data-theme="slate"] .text-neutral-text {
    color: var(--theme-text) !important;
}

[data-theme="slate"] .text-neutral-text-muted {
    color: var(--theme-text-muted) !important;
}

[data-theme="slate"] .border-neutral-border {
    border-color: var(--theme-border) !important;
}

[data-theme="slate"] .landing-prose.landing-prose h1 {
    letter-spacing: -0.03em !important;
    font-weight: 700 !important;
}