/* Base Theme Variables */
:root {
    /* Breakpoints - for reference only, not used as variables */
    --breakpoint-mobile-sm: 320px;
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1200px;

    /* Spacing Scale */
    --space-unit: 0.25rem;
    --space-xxs: calc(var(--space-unit) * 1);    /* 0.25rem */
    --space-xs: calc(var(--space-unit) * 2);     /* 0.5rem */
    --space-sm: calc(var(--space-unit) * 3);     /* 0.75rem */
    --space-md: calc(var(--space-unit) * 4);     /* 1rem */
    --space-lg: calc(var(--space-unit) * 6);     /* 1.5rem */
    --space-xl: calc(var(--space-unit) * 8);     /* 2rem */
    --space-xxl: calc(var(--space-unit) * 12);   /* 3rem */
    --space-xxxl: calc(var(--space-unit) * 16);  /* 4rem */
    --space-xxxxl: calc(var(--space-unit) * 32);  /* 4rem */

    /* Typography Scale */
    --font-size-base: 1rem;
    --font-size-xs: calc(var(--font-size-base) * 0.75);    /* 12px */
    --font-size-sm: calc(var(--font-size-base) * 0.875);   /* 14px */
    --font-size-md: var(--font-size-base);                 /* 16px */
    --font-size-lg: calc(var(--font-size-base) * 1.25);    /* 20px */
    --font-size-xl: calc(var(--font-size-base) * 1.5);     /* 24px */
    --font-size-xxl: calc(var(--font-size-base) * 2);      /* 32px */
    --font-size-xxxl: calc(var(--font-size-base) * 2.5);   /* 40px */

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-base: 1.6;
    --line-height-relaxed: 1.8;

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

    /* Layout */
    --container-padding: var(--space-md);
    --section-spacing: var(--space-xxxxl);
    --header-height: 100px;
    --content-width-sm: 640px;
    --content-width-md: 768px;
    --content-width-lg: 1024px;
    --content-width-xl: 1200px;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

    /* Transitions */
    --transition-speed: 0.3s;
    --transition-timing: ease;
    --theme-transition: color var(--transition-speed) var(--transition-timing),
                       background-color var(--transition-speed) var(--transition-timing);

    /* Light Theme Colors (default) */
    --primary: #3a7be0;
    --primary-gradient-1: #112fcf;
    --primary-gradient-2: #3b3bc8;
    --primary-gradient-3: #5743ed;
    --primary-gradient-4: #784dd9;
    
    --bg-main: #f8f8f8;
    --bg-card: #f1f1f1;
    --text: #333333;
    --text-muted: #666666;
    --header-gradient-1: rgba(237, 237, 237, 0.9);
    --header-gradient-2: rgba(228, 228, 228, 0.9);
    --border-color: rgba(58, 123, 224, 0.1);
    --bg-hover-rgb: 237, 237, 237;
    --bg-hover-nav: 207, 207, 207;

    /* Z-index Scale */
    --z-below: -1;
    --z-normal: 1;
    --z-above: 10;
    --z-header: 100;
    --z-modal: 1000;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-main: #0a0a0a;
    --bg-card: #141414;
    --text: #e0e0e0;
    --text-muted: #888888;
    --header-gradient-1: rgba(14, 14, 14, 0.9);
    --header-gradient-2: rgba(41, 41, 41, 0.9);
    --bg-hover-rgb: 17, 17, 17;
    --bg-hover-nav: 20, 20, 20;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    :root {
        /* Tablet Adjustments */
        --font-size-base: 0.9375rem;
        --header-height: 80px;
        --container-padding: var(--space-lg);
        --section-spacing: var(--space-xl);
    }
}

@media (max-width: 480px) {
    :root {
        /* Mobile Adjustments */
        --font-size-base: 0.875rem;
        --header-height: 70px;
        --container-padding: var(--space-md);
        --section-spacing: var(--space-lg);
    }
}

@media (max-width: 320px) {
    :root {
        /* Small Mobile Adjustments */
        --font-size-base: 0.8125rem;
        --header-height: 60px;
        --container-padding: var(--space-sm);
        --section-spacing: var(--space-md);
    }
}

/* Safe Area Insets for Notched Devices */
@supports (padding: max(0px)) {
    :root {
        --safe-area-inset-top: max(0px, env(safe-area-inset-top));
        --safe-area-inset-right: max(0px, env(safe-area-inset-right));
        --safe-area-inset-bottom: max(0px, env(safe-area-inset-bottom));
        --safe-area-inset-left: max(0px, env(safe-area-inset-left));
    }
}