/*
 * Theme Configuration - Single Source of Truth
 * Update colors, spacing, shadows, and styles here to change across all pages
 */

:root {
    /* === COLORS === */

    /* Primary Gradient */
    --gradient-primary: linear-gradient(to right, rgba(11, 230, 255, 1) 0%, rgba(175, 11, 255, 1) 100%);
    --gradient-primary-light: linear-gradient(to right, rgba(11, 230, 255, 0.1) 0%, rgba(175, 11, 255, 0.1) 100%);
    --gradient-primary-lighter: linear-gradient(to right, rgba(11, 230, 255, 0.05) 0%, rgba(175, 11, 255, 0.05) 100%);

    /* Brand Colors */
    --color-primary: #667eea;
    --color-primary-light: rgba(102, 126, 234, 0.1);
    --color-primary-dark: #5568d3;

    /* Gradient Start/End Colors */
    --color-gradient-start: rgba(11, 230, 255, 1);
    --color-gradient-end: rgba(175, 11, 255, 1);

    /* Background */
    --bg-gradient: linear-gradient(135deg, #fefefe 0%, #fdfdfd 100%);
    --bg-white: #ffffff;
    --bg-light: #f8f9fa;
    --bg-lighter: #fafafa;

    /* Text Colors */
    --text-primary: #2c3e50;
    --text-secondary: #666666;
    --text-tertiary: #888888;
    --text-muted: #aaaaaa;

    /* Border Colors */
    --border-light: #e0e0e0;
    --border-lighter: #f0f0f0;
    --border-subtle: rgba(0, 0, 0, 0.05);

    /* Status Colors */
    --status-success-bg: #d4edda;
    --status-success-text: #155724;
    --status-success-border: #c3e6cb;

    --status-error-bg: #f8d7da;
    --status-error-text: #721c24;
    --status-error-border: #f5c6cb;

    --status-warning-bg: #fff3cd;
    --status-warning-text: #856404;
    --status-warning-border: #ffeaa7;

    --status-info-bg: #dbeafe;
    --status-info-text: #1e40af;
    --status-info-border: #bfdbfe;

    /* Semantic Colors */
    --color-green: #10b981;
    --color-green-light: #d1fae5;
    --color-green-dark: #065f46;

    --color-red: #ef4444;
    --color-red-light: #fee2e2;
    --color-red-dark: #991b1b;

    --color-yellow: #f59e0b;
    --color-yellow-light: #fef3c7;
    --color-yellow-dark: #92400e;

    --color-blue: #3b82f6;
    --color-blue-light: #dbeafe;
    --color-blue-dark: #1e40af;

    /* === SPACING === */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 40px;
    --spacing-5xl: 48px;
    --spacing-6xl: 60px;

    /* === BORDER RADIUS === */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* === SHADOWS === */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.01875);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.025);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.08);
    --shadow-focus: 0 0 0 4px rgba(102, 126, 234, 0.1);
    --shadow-hover: 0 8px 20px rgba(102, 126, 234, 0.4);

    /* === TYPOGRAPHY === */
    --font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    /* Font Sizes */
    --font-xs: 11px;
    --font-sm: 13px;
    --font-base: 15px;
    --font-md: 16px;
    --font-lg: 18px;
    --font-xl: 20px;
    --font-2xl: 24px;
    --font-3xl: 32px;
    --font-4xl: 36px;
    --font-5xl: 48px;

    /* Font Weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Line Heights */
    --line-tight: 1.2;
    --line-normal: 1.5;
    --line-relaxed: 1.6;
    --line-loose: 1.7;

    /* Letter Spacing */
    --letter-tight: -0.02em;
    --letter-normal: 0;
    --letter-wide: 0.05em;
    --letter-wider: 0.1em;

    /* === TRANSITIONS === */
    --transition-fast: 0.15s ease;
    --transition-base: 0.2s ease;
    --transition-slow: 0.3s ease;
    --transition-all: all 0.3s ease;

    /* === LAYOUT === */
    --container-max-width: 1200px;
    --container-wide-max-width: 1400px;
    --container-narrow-max-width: 800px;

    /* Logo */
    --logo-size: 29px;
    --logo-position-top: 25px;
    --logo-position-left: 25px;

    /* === Z-INDEX === */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 900;
    --z-modal-backdrop: 990;
    --z-modal: 1000;
    --z-popover: 1100;
    --z-tooltip: 1200;
}

/* === DARK MODE === */
[data-theme="dark"] {
    /* Background */
    --bg-gradient: linear-gradient(135deg, #1a1a1a 0%, #0f0f0f 100%);
    --bg-white: #1e1e1e;
    --bg-light: #2a2a2a;
    --bg-lighter: #252525;

    /* Text Colors */
    --text-primary: #e0e0e0;
    --text-secondary: #b0b0b0;
    --text-tertiary: #909090;
    --text-muted: #707070;

    /* Border Colors */
    --border-light: #3a3a3a;
    --border-lighter: #2f2f2f;
    --border-subtle: rgba(255, 255, 255, 0.1);

    /* Status Colors - Dark Mode */
    --status-success-bg: #1a3a2a;
    --status-success-text: #66d9a6;
    --status-success-border: #2a5a4a;

    --status-error-bg: #3a1a1a;
    --status-error-text: #ff8888;
    --status-error-border: #5a2a2a;

    --status-warning-bg: #3a3a1a;
    --status-warning-text: #ffdd88;
    --status-warning-border: #5a5a2a;

    --status-info-bg: #1a2a3a;
    --status-info-text: #88bbff;
    --status-info-border: #2a4a5a;

    /* Semantic Colors - Dark Mode */
    --color-green: #34d399;
    --color-green-light: #1f3a2f;
    --color-green-dark: #10b981;

    --color-red: #f87171;
    --color-red-light: #3a1f1f;
    --color-red-dark: #ef4444;

    --color-yellow: #fbbf24;
    --color-yellow-light: #3a3a1f;
    --color-yellow-dark: #f59e0b;

    --color-blue: #60a5fa;
    --color-blue-light: #1f2a3a;
    --color-blue-dark: #3b82f6;

    /* Shadows - Dark Mode */
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.3);
    --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 4px rgba(102, 126, 234, 0.2);
    --shadow-hover: 0 8px 20px rgba(11, 230, 255, 0.3);
}

/* === UTILITY CLASSES === */

/* Gradient Text */
.gradient-text {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Gradient Background */
.gradient-bg {
    background: var(--gradient-primary);
}

.gradient-bg-light {
    background: var(--gradient-primary-light);
}

/* Shadows */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* Borders */
.border-light { border: 0.5px solid var(--border-light); }
.border-subtle { border: 0.5px solid var(--border-subtle); }

/* Cards */
.card {
    background: var(--bg-white);
    border-radius: var(--radius-xl);
    padding: var(--spacing-4xl);
    box-shadow: var(--shadow-lg);
    border: 0.5px solid var(--border-light);
}

.card-sm {
    background: var(--bg-white);
    border-radius: var(--radius-lg);
    padding: var(--spacing-2xl);
    box-shadow: var(--shadow-md);
    border: 0.5px solid var(--border-light);
}

/* Hover Effects */
.hover-lift {
    transition: var(--transition-all);
}

.hover-lift:hover {
    transform: translateY(-4px);
}

.hover-lift-sm {
    transition: var(--transition-all);
}

.hover-lift-sm:hover {
    transform: translateY(-2px);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-primary);
    color: white;
    padding: 14px 32px;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    font-family: var(--font-family);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

.btn-secondary {
    background: var(--bg-white);
    color: var(--text-secondary);
    padding: 14px 32px;
    font-size: var(--font-base);
    font-weight: var(--font-semibold);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-all);
    font-family: var(--font-family);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Status Badges */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--radius-md);
    font-size: var(--font-xs);
    font-weight: var(--font-bold);
    text-transform: uppercase;
    letter-spacing: var(--letter-wide);
}

.badge-success {
    background: var(--status-success-bg);
    color: var(--status-success-text);
}

.badge-error {
    background: var(--status-error-bg);
    color: var(--status-error-text);
}

.badge-warning {
    background: var(--status-warning-bg);
    color: var(--status-warning-text);
}

.badge-info {
    background: var(--status-info-bg);
    color: var(--status-info-text);
}

/* Form Elements */
.input {
    width: 100%;
    padding: 14px 18px;
    font-size: var(--font-base);
    border: 2px solid var(--border-light);
    border-radius: var(--radius-md);
    font-family: var(--font-family);
    transition: var(--transition-all);
}

.input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--shadow-focus);
}

/* Section Titles */
.section-title {
    font-size: var(--font-2xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: var(--spacing-2xl);
    padding-bottom: var(--spacing-md);
    border-bottom: 3px solid;
    border-image: var(--gradient-primary) 1;
}

/* Page Headers */
.page-header {
    text-align: center;
    margin-bottom: var(--spacing-6xl);
    margin-top: var(--spacing-4xl);
    position: relative;
}

.page-title {
    font-size: var(--font-4xl);
    font-weight: var(--font-bold);
    color: var(--text-primary);
    margin-bottom: 10px;
}

.page-subtitle {
    font-size: var(--font-lg);
    color: var(--text-secondary);
}

/* Logo */
.logo {
    height: var(--logo-size);
    position: fixed;
    top: var(--logo-position-top);
    left: var(--logo-position-left);
    margin: 0;
    z-index: var(--z-fixed);
}

/* Responsive Typography */
@media (max-width: 768px) {
    :root {
        --font-4xl: 28px;
        --font-3xl: 24px;
        --font-2xl: 20px;
        --spacing-6xl: 40px;
        --spacing-5xl: 32px;
        --spacing-4xl: 28px;
    }
}