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

/* --- EDITORIAL (warm, serif headers, light background) --- */
[data-theme="editorial"],
:root {
    --theme-bg: #FAFAF8;
    --theme-surface: #ffffff;
    --theme-border: #E5E5E3;
    --theme-text: #111111;
    --theme-text-muted: #6B6B6B;
    --theme-text-subtle: #9B9B99;
    --theme-heading-font: 'Playfair Display', Georgia, serif;
    --theme-body-font: 'Outfit', system-ui, sans-serif;
    --theme-input-bg: #ffffff;
    --theme-card-bg: #ffffff;
    --theme-blockquote-bg: #ffffff;
    --theme-footer-border: #E5E5E3;
    --theme-selection-bg: var(--brand-primary-ring);
    --theme-selection-text: #111111;
    --theme-shadow: 0 1px 3px rgba(0,0,0,0.04);
    --theme-radius: 12px;
    --theme-input-radius: 10px;
}

/* --- 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;
}

/* --- 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;
}

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

body {
    background-color: var(--theme-bg) !important;
    color: var(--theme-text) !important;
    font-family: var(--theme-body-font) !important;
}

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

/* Form inputs */
.form-input {
    background-color: var(--theme-input-bg) !important;
    border-color: 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(--brand-primary) !important;
    box-shadow: 0 0 0 3px var(--brand-primary-ring) !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;
}

/* ============================================
   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;
}