/* CSS Variables - Design System */
:root {
    /* Primary Colors - Blue Theme */
    --primary-50: #e3f2fd;
    --primary-100: #bbdefb;
    --primary-200: #90caf9;
    --primary-300: #64b5f6;
    --primary-400: #42a5f5;
    --primary-500: #2196f3;
    --primary-600: #1e88e5;
    --primary-700: #1976d2;
    --primary-800: #1565c0;
    --primary-900: #0d47a1;

    /* Grays */
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #eeeeee;
    --gray-300: #e0e0e0;
    --gray-400: #bdbdbd;
    --gray-500: #9e9e9e;
    --gray-600: #757575;
    --gray-700: #616161;
    --gray-800: #424242;
    --gray-900: #212121;

    /* Semantic Colors */
    --success: #4caf50;
    --warning: #ff9800;
    --error: #f44336;
    --info: #2196f3;

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
    --font-mono: 'Fira Code', 'Courier New', Courier, monospace;

    /* Font Sizes */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */
    --text-6xl: 3.75rem;   /* 60px */
    --text-7xl: 4.5rem;    /* 72px */

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

    /* Line Heights */
    --leading-none: 1;
    --leading-tight: 1.25;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --leading-loose: 2;

    /* Spacing */
    --space-xs: 0.25rem;   /* 4px */
    --space-sm: 0.5rem;    /* 8px */
    --space-md: 1rem;      /* 16px */
    --space-lg: 1.5rem;    /* 24px */
    --space-xl: 2rem;      /* 32px */
    --space-2xl: 3rem;     /* 48px */
    --space-3xl: 4rem;     /* 64px */
    --space-4xl: 6rem;     /* 96px */
    --space-5xl: 8rem;     /* 128px */

    /* Layout */
    --container-max: 1280px;
    --container-padding: 1.5rem;
    --header-height: 64px;
    --footer-height: 300px;

    /* Section Spacing (Responsive) */
    --section-padding-mobile: var(--space-2xl);
    --section-padding-tablet: var(--space-3xl);
    --section-padding-desktop: var(--space-4xl);

    /* Border Radius */
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 50%;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 300ms ease;
    --transition-slow: 500ms ease;
    --animation-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);

    /* Common transitions */
    --transition-card: transform var(--transition-base), box-shadow var(--transition-base);
    --transition-hover: all var(--transition-fast);
    --transition-color: color var(--transition-fast);
    --transition-border: border-color var(--transition-fast);

    /* Card spacing */
    --card-padding-sm: var(--space-md);
    --card-padding-base: var(--space-lg);
    --card-padding-lg: var(--space-xl);

    /* Progress bars */
    --progress-height: 6px;
    --progress-height-sm: 4px;
    --progress-bg: var(--gray-200);
    --progress-gradient: linear-gradient(90deg, var(--primary-400), var(--primary-600));

    /* Common sizes */
    --avatar-sm: 40px;
    --avatar-md: 60px;
    --avatar-lg: 80px;
    --icon-sm: 24px;
    --icon-md: 32px;
    --icon-lg: 48px;

    /* Light Theme Colors (Default) */
    --bg-primary: #ffffff;
    --bg-secondary: var(--gray-50);
    --bg-tertiary: var(--gray-100);
    --text-primary: var(--gray-900);
    --text-secondary: var(--gray-700);
    --text-tertiary: var(--gray-500);
    --border-color: var(--gray-200);
    --link-color: var(--primary-600);
    --link-hover: var(--primary-700);

    /* Overlay & Modal */
    --overlay-bg: rgba(0, 0, 0, 0.8);
    --overlay-light: rgba(0, 0, 0, 0.5);
    --white-overlay: rgba(255, 255, 255, 0.1);

    /* Badge Colors */
    --badge-success-bg: rgba(16, 185, 129, 0.9);
    --badge-warning-bg: rgba(251, 146, 60, 0.9);
    --badge-info-bg: var(--primary-600);

    /* Pure Colors */
    --color-white: #ffffff;
    --color-black: #000000;

    /* Z-index Scale */
    --z-dropdown: 100;
    --z-modal: 200;
    --z-overlay: 300;
    --z-header: 400;
    --z-notification: 500;
}

/* Dark Theme */
[data-theme="dark"] {
    --bg-primary: #121212;
    --bg-secondary: #1e1e1e;
    --bg-tertiary: #2a2a2a;
    --text-primary: #ffffff;
    --text-secondary: var(--gray-300);
    --text-tertiary: var(--gray-400);
    --border-color: var(--gray-800);
    --link-color: var(--primary-400);
    --link-hover: var(--primary-300);

    /* Dark mode shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 10px 10px -5px rgba(0, 0, 0, 0.3);
}

/* Color Themes - Primary Color Variations */
/* Red Theme */
[data-color="red"] {
    --primary-50: #ffebee;
    --primary-100: #ffcdd2;
    --primary-200: #ef9a9a;
    --primary-300: #e57373;
    --primary-400: #ef5350;
    --primary-500: #f44336;
    --primary-600: #e53935;
    --primary-700: #d32f2f;
    --primary-800: #c62828;
    --primary-900: #b71c1c;
}

/* Green Theme */
[data-color="green"] {
    --primary-50: #e8f5e9;
    --primary-100: #c8e6c9;
    --primary-200: #a5d6a7;
    --primary-300: #81c784;
    --primary-400: #66bb6a;
    --primary-500: #4caf50;
    --primary-600: #43a047;
    --primary-700: #388e3c;
    --primary-800: #2e7d32;
    --primary-900: #1b5e20;
}

/* Orange Theme */
[data-color="orange"] {
    --primary-50: #fff3e0;
    --primary-100: #ffe0b2;
    --primary-200: #ffcc80;
    --primary-300: #ffb74d;
    --primary-400: #ffa726;
    --primary-500: #ff9800;
    --primary-600: #fb8c00;
    --primary-700: #f57c00;
    --primary-800: #ef6c00;
    --primary-900: #e65100;
}

/* Yellow Theme */
[data-color="yellow"] {
    --primary-50: #fffde7;
    --primary-100: #fff9c4;
    --primary-200: #fff59d;
    --primary-300: #fff176;
    --primary-400: #ffee58;
    --primary-500: #ffeb3b;
    --primary-600: #ffeb3b;  /* Pure bright yellow */
    --primary-700: #ffeb3b;  /* Pure bright yellow (not golden #fdd835) */
    --primary-800: #fdd835;  /* Slightly darker yellow */
    --primary-900: #fbc02d;  /* Darker yellow */
}

/* Responsive breakpoints */
@media (min-width: 640px) {
    :root {
        --container-padding: 2rem;
    }
}

@media (min-width: 768px) {
    :root {
        --container-padding: 2.5rem;
    }
}

@media (min-width: 1024px) {
    :root {
        --container-padding: 3rem;
        --header-height: 72px;
    }
}

@media (min-width: 1440px) {
    :root {
        --container-padding: 4rem;
    }
}