/* CSS Variables - Consolidated Design System */
/* Optimized palette with minimal redundancy and maximum consistency */

:root {
    /* ========== GRAY SCALE (Standard 10-shade scale) ========== */
    --color-gray-50: rgb(250, 250, 250);          /* Ultra light backgrounds */
    --color-gray-100: rgb(243, 244, 246);         /* Light backgrounds */
    --color-gray-200: rgb(229, 231, 235);         /* Light borders */
    --color-gray-300: rgb(209, 213, 219);         /* Medium light borders */
    --color-gray-400: rgb(156, 163, 175);         /* Muted text & icons */
    --color-gray-500: rgb(107, 114, 128);         /* Secondary text */
    --color-gray-600: rgb(75, 85, 99);            /* Body text */
    --color-gray-700: rgb(55, 65, 81);            /* Headings */
    --color-gray-800: rgb(31, 41, 55);            /* Strong text */
    --color-gray-900: rgb(17, 24, 39);            /* Primary text & dark UI */

    /* Shadow color */
    --color-shadow: rgba(0, 0, 0, 0.1);

    /* ========== RED (Standard 9-shade scale) ========== */
    --color-red-50: rgb(254, 242, 242);           /* Ultra light error backgrounds */
    --color-red-100: rgb(254, 226, 226);          /* Light error backgrounds */
    --color-red-200: rgb(254, 202, 202);          /* Very light red */
    --color-red-300: rgb(252, 165, 165);          /* Light red */
    --color-red-400: rgb(248, 113, 113);          /* Medium light red */
    --color-red-500: rgb(239, 68, 68);            /* Primary error/danger */
    --color-red-500-rgb: 239, 68, 68;             /* RGB values for alpha channel */
    --color-red-600: rgb(220, 38, 38);            /* Danger buttons */
    --color-red-700: rgb(185, 28, 28);            /* Dark error states */
    --color-red-800: rgb(153, 27, 27);            /* Very dark error */

    /* ========== BLUE (Standard 9-shade scale) ========== */
    --color-blue-50: rgb(239, 246, 255);          /* Ultra light blue backgrounds */
    --color-blue-100: rgb(219, 234, 254);         /* Light blue backgrounds */
    --color-blue-200: rgb(191, 219, 254);         /* Very light blue */
    --color-blue-300: rgb(147, 197, 253);         /* Light blue */
    --color-blue-400: rgb(59, 130, 246);          /* Primary blue & links */
    --color-blue-500: rgb(37, 99, 235);           /* Medium blue */
    --color-blue-600: rgb(29, 78, 216);           /* Dark blue hover */
    --color-blue-700: rgb(30, 64, 175);           /* Darker blue */
    --color-blue-900: rgb(30, 58, 138);           /* Darkest blue */

    /* ========== GREEN (Standard 9-shade scale) ========== */
    --color-green-50: rgb(240, 253, 244);         /* Ultra light success backgrounds */
    --color-green-100: rgb(220, 252, 231);        /* Light success backgrounds */
    --color-green-200: rgb(187, 247, 208);        /* Very light green */
    --color-green-300: rgb(134, 239, 172);        /* Light green */
    --color-green-400: rgb(74, 222, 128);         /* Medium green */
    --color-green-500: rgb(34, 197, 94);          /* Primary success */
    --color-green-600: rgb(22, 163, 74);          /* Success buttons */
    --color-green-700: rgb(21, 128, 61);          /* Dark success states */
    --color-green-800: rgb(22, 101, 52);          /* Darker green */
    --color-green-900: rgb(20, 83, 45);           /* Darkest green */

    /* ========== ORANGE (6 shades) ========== */
    --color-orange-50: rgb(255, 247, 237);        /* Ultra light orange */
    --color-orange-100: rgb(254, 215, 170);       /* Light warning backgrounds */
    --color-orange-400: rgb(251, 146, 60);        /* Primary orange */
    --color-orange-500: rgb(245, 158, 11);        /* Warning */
    --color-orange-600: rgb(217, 119, 6);         /* Dark orange */
    --color-orange-700: rgb(180, 83, 9);          /* Darker orange */

    /* ========== YELLOW (5 shades) ========== */
    --color-yellow-50: rgb(254, 252, 232);        /* Ultra light yellow */
    --color-yellow-100: rgb(254, 243, 199);       /* Light warning backgrounds */
    --color-yellow-300: rgb(253, 224, 71);        /* Light yellow */
    --color-yellow-400: rgb(250, 204, 21);        /* Primary yellow */
    --color-yellow-500: rgb(234, 179, 8);         /* Amber */

    /* ========== PURPLE (5 shades) ========== */
    --color-purple-100: rgb(243, 232, 255);       /* Light purple backgrounds */
    --color-purple-200: rgb(233, 213, 255);       /* Very light purple */
    --color-purple-400: rgb(192, 132, 252);       /* Light purple */
    --color-purple-500: rgb(168, 85, 247);        /* Primary purple */
    --color-purple-600: rgb(147, 51, 234);        /* Dark purple */

    /* ========== BROWN (4 shades) ========== */
    --color-brown-400: rgb(161, 98, 7);           /* Light brown */
    --color-brown-600: rgb(120, 53, 15);          /* Medium brown */
    --color-brown-700: rgb(92, 33, 4);            /* Dark brown */
    --color-brown-800: rgb(69, 26, 3);            /* Darker brown */

    /* ========== PINK (2 shades) ========== */
    --color-pink-500: rgb(236, 72, 153);          /* Primary pink */
    --color-pink-600: rgb(219, 39, 119);          /* Dark pink */

    /* ========== STANDARD COLORS ========== */
    --color-white: rgb(255, 255, 255);
    --color-black: rgb(0, 0, 0);
    --color-transparent: transparent;

    /* ========== SEMANTIC ALIASES ========== */
    /* Use these for semantic meaning in your code */

    /* Primary colors */
    --color-primary: var(--color-blue-400);
    --color-primary-hover: var(--color-blue-500);
    --color-primary-light: var(--color-blue-100);

    /* Success colors */
    --color-success: var(--color-green-500);
    --color-success-dark: var(--color-green-700);
    --color-success-light: var(--color-green-100);

    /* Error/Danger colors */
    --color-error: var(--color-red-500);
    --color-error-dark: var(--color-red-700);
    --color-error-light: var(--color-red-100);

    /* Warning colors */
    --color-warning: var(--color-orange-500);
    --color-warning-dark: var(--color-orange-600);
    --color-warning-light: var(--color-yellow-100);

    /* Info colors */
    --color-info: var(--color-blue-400);
    --color-info-dark: var(--color-blue-700);
    --color-info-light: var(--color-blue-100);

    /* Text colors */
    --color-text-primary: var(--color-gray-900);
    --color-text-secondary: var(--color-gray-600);
    --color-text-muted: var(--color-gray-400);

    /* Background colors */
    --color-bg-primary: var(--color-white);
    --color-bg-secondary: var(--color-gray-50);
    --color-bg-hover: var(--color-gray-100);

    /* Border colors */
    --color-border-light: var(--color-gray-200);
    --color-border-medium: var(--color-gray-400);
    --color-border-dark: var(--color-gray-600);

    /* ========== GLOBAL DESIGN TOKENS ========== */
    /* These are consistent across all themes */

    /* Spacing System (Base unit: 4px) */
    --spacing-0: 0;
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    --spacing-4xl: 48px;
    --spacing-5xl: 64px;

    /* Typography Scale */
    --text-xs: 11px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 24px;
    --text-4xl: 32px;

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

    /* Line Heights */
    --leading-tight: 1.2;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;

    /* Border Widths */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 4px;

    /* Border Radius */
    --radius-none: 0;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-full: 9999px;

    /* Shadows (Consolidated from 16 to 5 levels) */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.25);

    /* Opacity Levels */
    --opacity-0: 0;
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-85: 0.85;
    --opacity-90: 0.9;
    --opacity-100: 1;

    /* Z-Index Scale */
    --z-base: 0;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* Easing Functions */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);
    --ease-out: cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}