/* ==========================================================================
   ShareLit Theme System - Unified Light/Dark Mode Variables
   ========================================================================== */

:root {
    /* =========================
       Color Palette - Light Mode (Default)
       ========================= */
    --color-bg: #FFFFFF;
    --color-bg-secondary: #F5F5F7;
    --color-bg-tertiary: #EFECE3;
    --color-bg-card: rgba(255, 255, 255, 0.8);
    --color-bg-glass: rgba(255, 255, 255, 0.6);

    /* Text Colors */
    --color-text: #1D1D1F;
    --color-text-secondary: #86868B;
    --color-text-tertiary: #9ca3af;

    /* Primary/Accent Colors */
    --color-primary: #000000;
    --color-primary-text: #FFFFFF;
    --color-primary-neon: #007aff;
    --color-primary-glow: rgba(0, 122, 255, 0.3);
    --color-secondary-neon: #5856d6;

    /* Accent Colors */
    --color-accent-blue-light: #8FABD4;
    --color-accent-blue-dark: #4A70A9;

    /* Borders */
    --color-border: rgba(0, 0, 0, 0.1);
    --color-border-glass: rgba(0, 0, 0, 0.1);
    --color-border-neon: rgba(0, 122, 255, 0.2);
    --color-glass: rgba(255, 255, 255, 0.7);
    --color-glass-border: rgba(255, 255, 255, 0.5);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.12);
    --shadow-glow: 0 0 20px rgba(143, 171, 212, 0.3);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.05);

    /* Status Colors */
    --color-success: #34C759;
    --color-success-bg: #E8F5E9;
    --color-success-text: #2E7D32;
    --color-warning: #FF9500;
    --color-warning-bg: #FFF5E6;
    --color-warning-text: #B36D00;
    --color-error: #FF3B30;
    --color-error-bg: #FFF5F5;
    --color-error-text: #D32F2F;
    --color-info: #007AFF;
    --color-info-bg: #E3F2FD;
    --color-info-text: #1565C0;

    /* Stripe Brand Color (unchanged in both modes) */
    --color-stripe: #635BFF;
    --color-stripe-hover: #5851DF;

    /* Admin Gradient (light mode) */
    --admin-gradient: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    --admin-sidebar-bg: #1a202c;
    --admin-sidebar-text: #a0aec0;
    --admin-sidebar-hover: #2d3748;

    /* Layout */
    --container-width: 1200px;
    --header-height: 80px;
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;

    /* Typography - System Fonts Only */
    --font-family: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-family-text: "SF Pro Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Spacing */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-8: 48px;
    --space-10: 64px;
    --space-12: 80px;
    --space-20: 120px;

    /* Easings */
    --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);

    /* Legacy Mappings */
    --bg-primary: var(--color-bg);
    --bg-secondary: var(--color-bg-secondary);
    --text-primary: var(--color-text);
    --border-primary: var(--color-border);
    --shadow-xl: var(--shadow-lg);
    --font-sans: var(--font-family-text);
    --transition-base: 0.2s ease;
    --spacing-sm: var(--space-2);
    --spacing-md: var(--space-4);
    --spacing-lg: var(--space-6);
    --spacing-xl: var(--space-10);

    /* New Landing Page Variables Mapping */
    --bg-deep: var(--color-bg);
    --bg-dark: var(--color-bg-secondary);
    --bg-card: var(--color-bg-card);
    --bg-glass: var(--color-bg-glass);
    --primary-neon: var(--color-primary-neon);
    --primary-glow: var(--color-primary-glow);
    --secondary-neon: var(--color-secondary-neon);
    --text-white: var(--color-text);
    --text-gray: var(--color-text-secondary);
    --border-neon: var(--color-border-neon);
    --border-glass: var(--color-border-glass);
}

/* =========================
   Dark Mode Overrides
   ========================= */
[data-theme="dark"] {
    /* Background Colors */
    --color-bg: #0a0b10;
    --color-bg-secondary: #1a1b20;
    --color-bg-tertiary: #252630;
    --color-bg-card: rgba(30, 35, 45, 0.8);
    --color-bg-glass: rgba(10, 15, 30, 0.4);

    /* Text Colors */
    --color-text: #ffffff;
    --color-text-secondary: #a0a5b0;
    --color-text-tertiary: #6b7280;

    /* Primary/Accent Colors */
    --color-primary: #ffffff;
    --color-primary-text: #000000;
    --color-primary-neon: #00f0ff;
    --color-primary-glow: rgba(0, 240, 255, 0.5);
    --color-secondary-neon: #7000ff;

    /* Accent Colors */
    --color-accent-blue-light: #60a5fa;
    --color-accent-blue-dark: #3b82f6;

    /* Borders */
    --color-border: rgba(255, 255, 255, 0.1);
    --color-border-glass: rgba(255, 255, 255, 0.1);
    --color-border-neon: rgba(0, 240, 255, 0.3);
    --color-glass: rgba(30, 30, 40, 0.7);
    --color-glass-border: rgba(255, 255, 255, 0.1);

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.5);
    --shadow-glow: 0 0 20px rgba(0, 240, 255, 0.3);
    --shadow-card: none;

    /* Status Colors - Dark variants */
    --color-success: #4ade80;
    --color-success-bg: rgba(34, 197, 94, 0.15);
    --color-success-text: #86efac;
    --color-warning: #fbbf24;
    --color-warning-bg: rgba(251, 191, 36, 0.15);
    --color-warning-text: #fcd34d;
    --color-error: #f87171;
    --color-error-bg: rgba(248, 113, 113, 0.15);
    --color-error-text: #fca5a5;
    --color-info: #60a5fa;
    --color-info-bg: rgba(96, 165, 250, 0.15);
    --color-info-text: #93c5fd;

    /* Admin Dark Mode */
    --admin-gradient: linear-gradient(180deg, #1a1b20 0%, #0a0b10 100%);
    --admin-sidebar-bg: #0a0b10;
    --admin-sidebar-text: #a0a5b0;
    --admin-sidebar-hover: #1a1b20;

    /* New Landing Page Variables Mapping */
    --bg-deep: #050505;
    --bg-dark: #0a0b10;
    --bg-card: rgba(20, 25, 35, 0.6);
    --bg-glass: rgba(10, 15, 30, 0.4);
    --primary-neon: #00f0ff;
    --primary-glow: rgba(0, 240, 255, 0.5);
    --secondary-neon: #7000ff;
    --text-white: #ffffff;
    --text-gray: #a0a5b0;
    --border-neon: rgba(0, 240, 255, 0.3);
    --border-glass: rgba(255, 255, 255, 0.1);
}

/* =========================
   Theme Toggle Button
   ========================= */
.theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 20px;
    padding: 8px;
    color: var(--color-text);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.3s, color 0.3s;
}

.theme-toggle:hover {
    background: var(--color-border);
}

.theme-toggle .sun-icon {
    display: block;
}

.theme-toggle .moon-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .sun-icon {
    display: none;
}

[data-theme="dark"] .theme-toggle .moon-icon {
    display: block;
}

/* =========================
   Global Dark Mode Transitions
   ========================= */
body,
header,
footer,
.bento-card,
.pricing-card,
.faq-item,
.service-item,
.step-card,
.glass-panel,
.mobile-menu,
input,
textarea,
select,
button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* =========================
   Dark Mode Component Overrides
   ========================= */

/* Header Dark Mode */
[data-theme="dark"] header {
    background: rgba(10, 11, 16, 0.8);
    border-bottom-color: var(--color-border);
}

[data-theme="dark"] header.scrolled {
    background: rgba(10, 11, 16, 0.95);
}

/* Mobile Menu Dark Mode */
[data-theme="dark"] .mobile-menu {
    background: rgba(10, 11, 16, 0.95);
}

/* Bento Cards Dark Mode */
[data-theme="dark"] .bento-card {
    background: var(--color-bg-card);
    border: 1px solid var(--color-border);
}

[data-theme="dark"] .bento-card:hover {
    background: var(--color-bg-tertiary);
    box-shadow: var(--shadow-glow);
}

/* Service Items Dark Mode */
[data-theme="dark"] .service-item {
    color: var(--color-text);
}

[data-theme="dark"] .service-icon-wrapper {
    background: var(--color-bg-tertiary);
}

/* Pricing Cards Dark Mode */
[data-theme="dark"] .pricing-card {
    background: var(--color-bg-card);
    border-color: var(--color-border);
}

[data-theme="dark"] .pricing-toggle-container {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .duration-tabs {
    background: var(--color-bg-secondary);
    border-color: var(--color-border);
}

[data-theme="dark"] .duration-tab.active {
    background: var(--color-bg-tertiary);
    color: var(--color-text);
}

[data-theme="dark"] .slider {
    background-color: var(--color-bg-tertiary);
}

[data-theme="dark"] input:checked + .slider {
    background-color: var(--color-primary-neon);
}

/* FAQ Dark Mode */
[data-theme="dark"] .faq-item {
    background: var(--color-bg-card);
}

/* Footer Dark Mode */
[data-theme="dark"] footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border);
}

/* Buttons Dark Mode */
[data-theme="dark"] .btn-primary {
    background-color: var(--color-primary);
    color: var(--color-primary-text);
}

[data-theme="dark"] .btn-secondary {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text);
}

[data-theme="dark"] .btn-secondary:hover {
    background-color: var(--color-bg-card);
}

/* Text Gradient Dark Mode */
[data-theme="dark"] .text-gradient {
    background: linear-gradient(135deg, var(--color-primary-neon) 0%, var(--color-secondary-neon) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Glass Effect Dark Mode */
[data-theme="dark"] .glass {
    background: var(--color-glass);
    border-color: var(--color-glass-border);
}

/* Discount Badge Dark Mode */
[data-theme="dark"] .discount-badge {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

/* Tier Tabs Dark Mode */
[data-theme="dark"] .tier-tab {
    background: var(--color-bg-secondary) !important;
    color: var(--color-text-secondary) !important;
    border-color: var(--color-border) !important;
}

[data-theme="dark"] .tier-tab.active,
[data-theme="dark"] .tier-tab[style*="background: var(--color-primary)"] {
    background: var(--color-primary-neon) !important;
    color: #000 !important;
    border-color: var(--color-primary-neon) !important;
}

/* Forms Dark Mode */
[data-theme="dark"] input[type="text"],
[data-theme="dark"] input[type="email"],
[data-theme="dark"] input[type="password"],
[data-theme="dark"] input[type="number"],
[data-theme="dark"] input[type="search"],
[data-theme="dark"] textarea,
[data-theme="dark"] select {
    background: var(--color-bg-secondary);
    color: var(--color-text);
    border-color: var(--color-border);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
    color: var(--color-text-tertiary);
}

/* =========================
   Background Vectors (New Landing Page)
   ========================= */
.bg-vectors {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.vector-shape {
    position: absolute;
    opacity: 0.1;
    fill: var(--color-text);
    animation: floatBackground 20s infinite ease-in-out;
}

[data-theme="dark"] .vector-shape {
    opacity: 0.05;
    fill: var(--color-primary-neon);
}

@keyframes floatBackground {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    50% {
        transform: translate(20px, -20px) rotate(5deg);
    }
}

/* =========================
   Text Glow Effect
   ========================= */
.text-glow {
    color: var(--color-primary-neon);
}

[data-theme="dark"] .text-glow {
    text-shadow: 0 0 20px var(--color-primary-glow);
}

[data-theme="dark"] h1 {
    text-shadow: 0 0 40px rgba(0, 240, 255, 0.2);
}