/**
 * Theme Variables - Auto-generated from Admin Settings
 * Last Generated: 2026-06-05 02:31:38 */

:root {
    /* Brand Colors */
    --theme-primary: #3b82f6;
    --theme-primary-light: #d7e6fd;
    --theme-primary-dark: #326ed1;
    --theme-secondary: #8b5cf6;
    --theme-accent: #06b6d4;
    
    /* Status Colors */
    --theme-success: #10b981;
    --theme-success-light: #cff1e5;
    --theme-warning: #f59e0b;
    --theme-warning-light: #fdebce;
    --theme-error: #ef4444;
    --theme-error-light: #fbd9d9;
    
    /* Typography Colors */
    --theme-text-primary: #1e293b;
    --theme-text-secondary: #64748b;
    --theme-link: #3b82f6;
    
    /* Background Colors */
    --theme-bg: #ffffff;
    --theme-card-bg: #f8fafc;
    --theme-border: #e2e8f0;
    
    /* Border Radius */
    --theme-btn-radius: 8px;
    --theme-card-radius: 12px;
    
    /* Typography */
    --theme-font-family: system-ui, -apple-system, sans-serif;
    --theme-heading-font: system-ui, -apple-system, sans-serif;
}

/* Apply theme colors to common elements */
body {
    font-family: var(--theme-font-family);
    color: var(--theme-text-primary);
    background-color: var(--theme-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--theme-heading-font);
    color: var(--theme-text-primary);
}

a {
    color: var(--theme-link);
}

a:hover {
    color: var(--theme-primary-dark);
}

/* Button Styles */
.btn-primary,
.btn.btn-primary {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    border-radius: var(--theme-btn-radius);
    color: white;
}

.btn-primary:hover,
.btn.btn-primary:hover {
    background: linear-gradient(135deg, var(--theme-primary-dark) 0%, var(--theme-primary) 100%);
}

.btn-secondary {
    background-color: var(--theme-secondary);
    border-radius: var(--theme-btn-radius);
}

.btn-success {
    background-color: var(--theme-success);
    border-radius: var(--theme-btn-radius);
}

.btn-warning {
    background-color: var(--theme-warning);
    border-radius: var(--theme-btn-radius);
}

.btn-error,
.btn-danger {
    background-color: var(--theme-error);
    border-radius: var(--theme-btn-radius);
}

/* Card Styles */
.card,
.product-card,
.pricing-card {
    background-color: var(--theme-card-bg);
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-card-radius);
}

/* Alert Styles */
.alert-success {
    background-color: var(--theme-success-light);
    color: var(--theme-success);
    border: 1px solid var(--theme-success);
    border-radius: var(--theme-btn-radius);
}

.alert-warning {
    background-color: var(--theme-warning-light);
    color: var(--theme-warning);
    border: 1px solid var(--theme-warning);
    border-radius: var(--theme-btn-radius);
}

.alert-error,
.alert-danger {
    background-color: var(--theme-error-light);
    color: var(--theme-error);
    border: 1px solid var(--theme-error);
    border-radius: var(--theme-btn-radius);
}

/* Form Elements */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
    border: 1px solid var(--theme-border);
    border-radius: var(--theme-btn-radius);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus {
    border-color: var(--theme-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--theme-primary-rgb, 59, 130, 246), 0.1);
}

/* Navigation */
.header {
    background-color: var(--theme-bg);
    border-bottom: 1px solid var(--theme-border);
}

.nav-link {
    color: var(--theme-text-primary);
}

.nav-link:hover {
    color: var(--theme-primary);
}

/* Footer */
.footer {
    background-color: var(--theme-card-bg);
    border-top: 1px solid var(--theme-border);
}

/* Pricing Colors Override */
.pricing-box {
    background: linear-gradient(135deg, var(--theme-primary) 0%, var(--theme-primary-dark) 100%);
    border-radius: var(--theme-card-radius);
}

/* WhatsApp Button - Keep green but use theme radius */
.btn-whatsapp {
    border-radius: var(--theme-btn-radius);
}

/* Badge Styles */
.badge {
    border-radius: calc(var(--theme-btn-radius) / 2);
}

.badge-primary {
    background-color: var(--theme-primary);
}

.badge-success {
    background-color: var(--theme-success);
}

.badge-warning {
    background-color: var(--theme-warning);
}

.badge-error,
.badge-danger {
    background-color: var(--theme-error);
}

/* Section Backgrounds */
.section {
    background-color: var(--theme-bg);
}

.section.alternate {
    background-color: var(--theme-card-bg);
}

/* Progress Bar */
.progress-bar {
    background-color: var(--theme-primary);
}

/* Tabs */
.tab-active {
    border-bottom: 2px solid var(--theme-primary);
    color: var(--theme-primary);
}

/* Loading Spinner */
.spinner {
    border-top-color: var(--theme-primary);
}