/* Theme System */
:root {
    /* Default Theme (Green/Blue) */
    --primary-gradient: linear-gradient(90deg, #00FFA8, #00C0FF);
    --primary-color-start: #00FFA8;
    --primary-color-end: #00C0FF;
    --text-gradient: var(--primary-gradient);
    --accent-color: #00FFA8;
    --secondary-color: #00C0FF;
    --secondary-color-rgb: 0, 192, 255;
    --accent-color-rgb: 0, 255, 168;

    /* Background colors */
    --bg-primary: #0a0e17;
    --bg-secondary: #0d121e;
    --bg-light: #1a2130;

    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b7c3;
    --text-muted: #8a9199;

    /* Card and UI elements */
    --card-bg: rgba(255, 255, 255, 0.03);
    --card-border: rgba(255, 255, 255, 0.05);
    --footer-bg: #080b12;

    /* Legacy support */
    --background-dark: var(--bg-primary);
    --background-light: var(--bg-light);
    --section-bg: var(--bg-secondary);
    --text-color: var(--text-primary);
    --text-muted: var(--text-secondary);
}

/* Alternative Theme */
body.theme-alt {
    --primary-gradient: linear-gradient(90deg, #FF6B6B, #FFD166);
    --primary-color-start: #FF6B6B;
    --primary-color-end: #FFD166;
    --text-gradient: var(--primary-gradient);
    --accent-color: #FF6B6B;
    --secondary-color: #FFD166;
    --secondary-color-rgb: 255, 209, 102;
    --accent-color-rgb: 255, 107, 107;
    /* Keep the same background and text colors for consistency */
}

/* Ensure h1 uses the theme colors properly */
body.theme-alt h1 {
    background: linear-gradient(90deg, #FF6B6B, #FFD166);
    background: var(--text-gradient, linear-gradient(90deg, #FF6B6B, #FFD166));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers that don't support background-clip */
    color: #FF6B6B;
}

/* Apply gradient text styling */
.gradient-text {
    background: var(--text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Theme toggle button */
.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--text-color);
    padding: 10px 15px;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
}

.theme-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.theme-toggle-icon {
    font-size: 1.2rem;
}

/* Theme-specific button styles */
.btn-primary {
    background: var(--primary-gradient);
}

/* Theme-specific accent elements */
.counter,
.timeline-date,
.testimonial-role,
.benefit-icon {
    color: var(--accent-color);
}

/* Timeline gradient */
.timeline-container::before {
    background: linear-gradient(to bottom, var(--primary-color-start), var(--primary-color-end));
}

/* Logo styling */
.logo svg text,
.logo img[src*="svg+base64"] {
    fill: var(--accent-color);
    color: var(--accent-color);
}