/* ================================================== */
/* PRANARP PUBLIC THEME TOKENS */
/* ================================================== */
/*
 * COLOR AUDIT (public marketing site)
 * ---------------------------------
 * Repeated surfaces:
 *   - Page bg: slate gradient #0f172a → #334155
 *   - Cards: rgba(15, 23, 42, 0.8–0.95)
 *   - Subtle panels: rgba(30, 41, 59, 0.5)
 * Repeated accents:
 *   - Primary purple #9333ea / #7c3aed
 *   - Teal glow rgba(20, 184, 166, …)
 *   - Purple glow rgba(147, 51, 234, …)
 * Text scale:
 *   - Primary #f8fafc, secondary #cbd5e1, muted #94a3b8
 * Components to tokenize:
 *   - Header scrolled glass, nav overlay, hero radials, lang switcher glass,
 *     card rings, promo banner, status colors (success/warning/info)
 *
 * Dark theme = current production design (official).
 * Light theme = same hierarchy, softer SaaS palette.
 */

/* Default = official dark (matches production before theme toggle) */
:root,
[data-theme="dark"] {
    --pranarp-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
    --pranarp-bg-gradient-secondary: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    --pranarp-bg-radials:
        radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(20, 184, 166, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(147, 51, 234, 0.04) 0%, transparent 50%);

    --pranarp-card-bg: rgba(15, 23, 42, 0.95);
    --pranarp-card-bg-soft: rgba(15, 23, 42, 0.8);
    --pranarp-card-bg-subtle: rgba(30, 41, 59, 0.5);

    --pranarp-border-light: rgba(148, 163, 184, 0.4);
    --pranarp-border-accent: rgba(147, 51, 234, 0.18);
    --pranarp-border-accent-strong: rgba(147, 51, 234, 0.2);
    --pranarp-border-subtle: rgba(148, 163, 184, 0.2);

    --pranarp-shadow-deep: 0 20px 45px rgba(0, 0, 0, 0.45);
    --pranarp-shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --pranarp-shadow-button: 0 10px 25px rgba(147, 51, 234, 0.35);
    --pranarp-shadow-button-hover: 0 14px 30px rgba(147, 51, 234, 0.45);

    --pranarp-primary: #9333ea;
    --pranarp-primary-soft: #7c3aed;
    --pranarp-primary-strong: #6d28d9;
    --pranarp-primary-gradient: linear-gradient(135deg, #9333ea, #7c3aed);
    --pranarp-primary-gradient-hover: linear-gradient(135deg, #7c3aed, #6d28d9);

    --pranarp-text-primary: #f8fafc;
    --pranarp-text-secondary: #cbd5e1;
    --pranarp-text-muted: #94a3b8;
    --pranarp-text-hover: #e5e7eb;
    --pranarp-text-on-primary: #ffffff;

    --pranarp-brand-gradient: linear-gradient(135deg, #f8fafc, #cbd5e1, #9333ea);

    --pranarp-header-scrolled-bg: rgba(15, 23, 42, 0.86);
    --pranarp-header-scrolled-border: rgba(148, 163, 184, 0.1);
    --pranarp-header-scrolled-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
    --pranarp-nav-overlay-bg: rgba(0, 0, 0, 0.5);

    --pranarp-hero-layer: radial-gradient(circle at top left, rgba(147, 51, 234, 0.12) 0, transparent 50%),
        radial-gradient(circle at bottom right, rgba(20, 184, 166, 0.08) 0, transparent 50%),
        var(--pranarp-bg-gradient);

    --pranarp-card-ring: rgba(15, 23, 42, 0.9);
    --pranarp-card-ring-accent: rgba(147, 51, 234, 0.25);

    --pranarp-surface-glass-bg: rgba(255, 255, 255, 0.1);
    --pranarp-surface-glass-border: rgba(255, 255, 255, 0.2);
    --pranarp-surface-glass-bg-hover: rgba(255, 255, 255, 0.15);
    --pranarp-surface-glass-border-hover: rgba(255, 255, 255, 0.3);
    --pranarp-surface-glass-bg-active: rgba(255, 255, 255, 0.2);
    --pranarp-surface-glass-border-active: rgba(255, 255, 255, 0.4);

    --pranarp-accent-purple-08: rgba(147, 51, 234, 0.08);
    --pranarp-accent-purple-10: rgba(147, 51, 234, 0.1);
    --pranarp-accent-purple-15: rgba(147, 51, 234, 0.15);
    --pranarp-accent-purple-20: rgba(147, 51, 234, 0.2);
    --pranarp-accent-purple-25: rgba(147, 51, 234, 0.25);
    --pranarp-accent-purple-30: rgba(147, 51, 234, 0.3);
    --pranarp-accent-teal-08: rgba(20, 184, 166, 0.08);
    --pranarp-accent-teal-10: rgba(20, 184, 166, 0.1);
    --pranarp-accent-teal-15: rgba(20, 184, 166, 0.15);

    --pranarp-btn-outline-hover-bg: rgba(15, 23, 42, 0.9);
    --pranarp-promo-banner-bg: linear-gradient(135deg, rgba(147, 51, 234, 0.15), rgba(20, 184, 166, 0.1));
    --pranarp-promo-banner-border: rgba(147, 51, 234, 0.2);
    --pranarp-surface-hover: rgba(148, 163, 184, 0.1);
    --pranarp-input-bg: rgba(30, 41, 59, 0.5);
    --pranarp-input-focus-ring: rgba(147, 51, 234, 0.2);
    --pranarp-input-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);

    --pranarp-color-success: #10b981;
    --pranarp-color-warning: #f59e0b;
    --pranarp-color-info: #3b82f6;
    --pranarp-color-danger: #ef4444;
    --pranarp-color-whatsapp: #25d366;
    --pranarp-color-accent-alt: #14b8a6;

    --pranarp-badge-promo-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --pranarp-badge-success-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.2) 100%);
    --pranarp-badge-success-border: rgba(16, 185, 129, 0.4);

    --pranarp-meta-theme-color: #0f172a;
    color-scheme: dark;
}

[data-theme="light"] {
    --pranarp-bg-gradient: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 48%, #e8eef5 100%);
    --pranarp-bg-gradient-secondary: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 50%, #dbe4ee 100%);
    --pranarp-bg-radials:
        radial-gradient(circle at 20% 80%, rgba(147, 51, 234, 0.07) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(99, 102, 241, 0.06) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(20, 184, 166, 0.05) 0%, transparent 50%);

    --pranarp-card-bg: rgba(255, 255, 255, 0.92);
    --pranarp-card-bg-soft: rgba(255, 255, 255, 0.86);
    --pranarp-card-bg-subtle: rgba(248, 250, 252, 0.95);

    --pranarp-border-light: rgba(148, 163, 184, 0.45);
    --pranarp-border-accent: rgba(147, 51, 234, 0.22);
    --pranarp-border-accent-strong: rgba(147, 51, 234, 0.28);
    --pranarp-border-subtle: rgba(148, 163, 184, 0.28);

    --pranarp-shadow-deep: 0 20px 45px rgba(15, 23, 42, 0.08);
    --pranarp-shadow-card: 0 25px 50px -12px rgba(15, 23, 42, 0.07);
    --pranarp-shadow-button: 0 10px 25px rgba(147, 51, 234, 0.22);
    --pranarp-shadow-button-hover: 0 14px 30px rgba(147, 51, 234, 0.3);

    --pranarp-primary: #9333ea;
    --pranarp-primary-soft: #7c3aed;
    --pranarp-primary-strong: #6d28d9;
    --pranarp-primary-gradient: linear-gradient(135deg, #9333ea, #7c3aed);
    --pranarp-primary-gradient-hover: linear-gradient(135deg, #7c3aed, #6d28d9);

    --pranarp-text-primary: #0f172a;
    --pranarp-text-secondary: #475569;
    --pranarp-text-muted: #64748b;
    --pranarp-text-hover: #1e293b;
    --pranarp-text-on-primary: #ffffff;

    --pranarp-brand-gradient: linear-gradient(135deg, #0f172a, #475569, #9333ea);

    --pranarp-header-scrolled-bg: rgba(255, 255, 255, 0.9);
    --pranarp-header-scrolled-border: rgba(148, 163, 184, 0.22);
    --pranarp-header-scrolled-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
    --pranarp-nav-overlay-bg: rgba(15, 23, 42, 0.35);

    --pranarp-hero-layer: radial-gradient(circle at top left, rgba(147, 51, 234, 0.1) 0, transparent 50%),
        radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.08) 0, transparent 50%),
        var(--pranarp-bg-gradient);

    --pranarp-card-ring: rgba(148, 163, 184, 0.25);
    --pranarp-card-ring-accent: rgba(147, 51, 234, 0.22);

    --pranarp-surface-glass-bg: rgba(15, 23, 42, 0.04);
    --pranarp-surface-glass-border: rgba(148, 163, 184, 0.35);
    --pranarp-surface-glass-bg-hover: rgba(15, 23, 42, 0.06);
    --pranarp-surface-glass-border-hover: rgba(148, 163, 184, 0.45);
    --pranarp-surface-glass-bg-active: rgba(15, 23, 42, 0.08);
    --pranarp-surface-glass-border-active: rgba(147, 51, 234, 0.35);

    --pranarp-accent-purple-08: rgba(147, 51, 234, 0.06);
    --pranarp-accent-purple-10: rgba(147, 51, 234, 0.08);
    --pranarp-accent-purple-15: rgba(147, 51, 234, 0.12);
    --pranarp-accent-purple-20: rgba(147, 51, 234, 0.16);
    --pranarp-accent-purple-25: rgba(147, 51, 234, 0.2);
    --pranarp-accent-purple-30: rgba(147, 51, 234, 0.24);
    --pranarp-accent-teal-08: rgba(20, 184, 166, 0.06);
    --pranarp-accent-teal-10: rgba(20, 184, 166, 0.08);
    --pranarp-accent-teal-15: rgba(20, 184, 166, 0.12);

    --pranarp-btn-outline-hover-bg: rgba(248, 250, 252, 0.98);
    --pranarp-promo-banner-bg: linear-gradient(135deg, rgba(147, 51, 234, 0.1), rgba(99, 102, 241, 0.08));
    --pranarp-promo-banner-border: rgba(147, 51, 234, 0.18);
    --pranarp-surface-hover: rgba(148, 163, 184, 0.14);
    --pranarp-input-bg: rgba(255, 255, 255, 0.95);
    --pranarp-input-focus-ring: rgba(147, 51, 234, 0.18);
    --pranarp-input-shadow: 0 4px 12px rgba(15, 23, 42, 0.06);

    --pranarp-color-success: #059669;
    --pranarp-color-warning: #d97706;
    --pranarp-color-info: #2563eb;
    --pranarp-color-danger: #dc2626;
    --pranarp-color-whatsapp: #25d366;
    --pranarp-color-accent-alt: #0d9488;

    --pranarp-badge-promo-bg: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --pranarp-badge-success-bg: linear-gradient(135deg, rgba(16, 185, 129, 0.12) 0%, rgba(5, 150, 105, 0.16) 100%);
    --pranarp-badge-success-border: rgba(16, 185, 129, 0.35);

    --pranarp-meta-theme-color: #f8fafc;
    color-scheme: light;
}

/* Theme toggle (header + mobile menu) */
.public-theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: var(--pranarp-surface-glass-bg);
    border: 1px solid var(--pranarp-surface-glass-border);
    border-radius: var(--pranarp-radius-md, 0.75rem);
    color: var(--pranarp-text-primary);
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
    flex-shrink: 0;
}

.public-theme-toggle:hover {
    background: var(--pranarp-surface-glass-bg-hover);
    border-color: var(--pranarp-surface-glass-border-hover);
    color: var(--pranarp-text-hover);
}

.public-theme-toggle__icon {
    font-size: 1.15rem;
    line-height: 1;
}

[data-theme="dark"] .public-theme-toggle__icon--light {
    display: none;
}

[data-theme="dark"] .public-theme-toggle__icon--dark {
    display: inline-flex;
}

[data-theme="light"] .public-theme-toggle__icon--light {
    display: inline-flex;
}

[data-theme="light"] .public-theme-toggle__icon--dark {
    display: none;
}

/* Mobile drawer only — desktop uses .public-header__actions toggle */
.public-nav__theme {
    display: none;
}

@media (min-width: 993px) {
    .public-header__actions > .public-theme-toggle {
        display: inline-flex;
    }
}

@media (max-width: 992px) {
    .public-header__actions > .public-theme-toggle {
        display: none;
    }

    .public-nav__theme {
        display: flex;
        align-items: center;
        padding: 0.75rem 0;
        margin-bottom: 0.25rem;
        border-bottom: 1px solid var(--pranarp-border-subtle);
    }
}

/* Structural tokens (theme-agnostic; used by critical CSS before main bundle) */
:root {
    --pranarp-radius-sm: 0.25rem;
    --pranarp-radius-md: 0.75rem;
    --pranarp-radius-lg: 1rem;
    --pranarp-radius-xl: 1.75rem;
    --pranarp-radius-full: 999px;
    --pranarp-spacing-section: 3rem 0 4rem;
    --pranarp-spacing-section-mobile: 2rem 0 3rem;
    --pranarp-font-family: 'Plus Jakarta Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}