/**
 * KIN Lead Engine - CSS Variables System (Solusi 1)
 *
 * Seluruh token warna, radius, border, dan typography KIN dikontrol via CSS Custom Properties.
 * Sangat mudah di-override dari Frontend, Elementor Page Settings, atau Theme CSS.
 *
 * @package KINLeadEngine
 */

:root {
    /* === 1. BRAND COLORS (Kampung Inggris Nature) === */
    --kin-primary-green: #0D3B2E;           /* Deep Forest Green (Identitas Utama KIN) */
    --kin-primary-green-rgb: 13, 59, 46;
    --kin-primary-green-light: #164E3D;     /* Forest Glow */
    --kin-nature-green: #2D6A4F;            /* Moss / Emerald Leaf Accent */
    --kin-nature-green-light: #E8F5E9;      /* Subtle Mint Background */
    --kin-nature-green-hover: #1B4332;
    
    /* === 2. ACCENT & CTA COLORS === */
    --kin-accent-gold: #FBBF24;             /* Amber Gold (Sesuai Banner Referensi KIN) */
    --kin-accent-gold-hover: #F59E0B;
    --kin-accent-gold-text: #0D3B2E;        /* Teks Gelap Kontras di Tombol Emas */
    --kin-accent-gold-glow: rgba(251, 191, 36, 0.45);
    
    /* === 3. SEGMENTED RADIO BUTTONS (Bentuk Tombol) === */
    --kin-btn-segment-bg: #F8FAFC;
    --kin-btn-segment-color: #334155;
    --kin-btn-segment-border: #CBD5E1;
    --kin-btn-segment-hover-bg: #F1F5F9;
    --kin-btn-segment-hover-border: #94A3B8;
    --kin-btn-segment-active-bg: #0D3B2E;
    --kin-btn-segment-active-color: #FFFFFF;
    --kin-btn-segment-active-border: #0D3B2E;
    --kin-btn-segment-active-shadow: 0 4px 12px rgba(13, 59, 46, 0.2);

    /* === 4. FORM CARDS & SURFACES === */
    --kin-card-bg: #FFFFFF;
    --kin-card-border: #E2E8F0;
    --kin-card-shadow: 0 16px 38px -4px rgba(13, 59, 46, 0.08), 0 4px 14px -2px rgba(13, 59, 46, 0.03);
    --kin-card-radius: 20px;
    --kin-card-padding: 36px 40px;

    /* === 5. FORM CONTROLS (Inputs, Selects) === */
    --kin-input-bg: #FFFFFF;
    --kin-input-border: #CBD5E1;
    --kin-input-border-hover: #94A3B8;
    --kin-input-focus-border: #2D6A4F;
    --kin-input-focus-ring: rgba(45, 106, 79, 0.2);
    --kin-input-radius: 10px;
    --kin-input-height: 48px;
    --kin-input-text: #0F172A;
    --kin-input-placeholder: #94A3B8;

    /* === 6. TYPOGRAPHY === */
    --kin-font-family: 'Plus Jakarta Sans', 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --kin-text-title: #0D3B2E;
    --kin-text-subtitle: #64748B;
    --kin-text-label: #1E293B;
    --kin-text-required: #DC2626;

    /* === 7. WHATSAPP & ACTIONS === */
    --kin-color-wa: #25D366;
    --kin-color-wa-hover: #1EBE5D;
    --kin-color-wa-shadow: rgba(37, 211, 102, 0.25);
    --kin-transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === THEME 2: DARK NATURE (Glassmorphism Hijau Gelap Sesuai Banner KIN) === */
.kin-theme-dark,
[data-kin-theme="dark"] {
    --kin-card-bg: linear-gradient(145deg, rgba(13, 59, 46, 0.95), rgba(9, 43, 33, 0.98));
    --kin-card-border: rgba(255, 255, 255, 0.12);
    --kin-card-shadow: 0 24px 50px rgba(0, 0, 0, 0.35);
    
    --kin-text-title: #FFFFFF;
    --kin-text-subtitle: #CBD5E1;
    --kin-text-label: #F1F5F9;
    --kin-text-required: #F87171;

    --kin-input-bg: #FFFFFF;
    --kin-input-border: rgba(255, 255, 255, 0.25);
    --kin-input-text: #0F172A;

    --kin-btn-segment-bg: rgba(255, 255, 255, 0.08);
    --kin-btn-segment-color: #E2E8F0;
    --kin-btn-segment-border: rgba(255, 255, 255, 0.18);
    --kin-btn-segment-hover-bg: rgba(255, 255, 255, 0.15);
    --kin-btn-segment-hover-border: rgba(255, 255, 255, 0.3);
    --kin-btn-segment-active-bg: var(--kin-accent-gold);
    --kin-btn-segment-active-color: #0D3B2E;
    --kin-btn-segment-active-border: var(--kin-accent-gold);
    --kin-btn-segment-active-shadow: 0 4px 16px var(--kin-accent-gold-glow);
}

/* === THEME 3: TRANSPARENT (Menyatu 100% dengan Elementor Container) === */
.kin-theme-transparent,
[data-kin-theme="transparent"] {
    --kin-card-bg: transparent;
    --kin-card-border: transparent;
    --kin-card-shadow: none;
    --kin-card-padding: 0;
}