/* Jellyblob - CSS Variables
-------------------------------------------------- */
:root {
    /* Color Palette */
    --primary-color: #4169E1; /* Royal Blue */
    --primary-light: #6A8BEF;
    --primary-dark: #2A4DB8;
    
    --secondary-color: #8A2BE2; /* Purple */
    --secondary-light: #A25FEA;
    --secondary-dark: #6A1BB2;
    
    --accent-color: #FF4081; /* Pink */
    --accent-light: #FF74A1;
    --accent-dark: #D01B5C;
    
    --success-color: #0ABF53; /* Green */
    --warning-color: #FFB400; /* Amber */
    --error-color: #FF3B30; /* Red */
    
    /* Neutral Colors */
    --black: #121212;
    --dark-gray: #1F1F1F;
    --medium-gray: #313131;
    --light-gray: #616161;
    --very-light-gray: #9E9E9E;
    --off-white: #E0E0E0;
    --white: #FFFFFF;
    
    /* Background Colors */
    --bg-dark: var(--black);
    --bg-card: var(--dark-gray);
    --bg-hover: var(--medium-gray);
    
    /* Text Colors */
    --text-primary: var(--white);
    --text-secondary: var(--off-white);
    --text-tertiary: var(--very-light-gray);
    --text-inactive: var(--light-gray);
    
    /* Gradients */
    --primary-gradient: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    --overlay-gradient: linear-gradient(180deg, rgba(18, 18, 18, 0) 0%, rgba(18, 18, 18, 0.8) 100%);
    --hero-overlay: linear-gradient(180deg, rgba(18, 18, 18, 0.4) 0%, rgba(18, 18, 18, 0.9) 100%);
    
    /* Spacing System (8px based) */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-xxl: 48px;
    
    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    --font-size-xs: 0.75rem;    /* 12px */
    --font-size-sm: 0.875rem;   /* 14px */
    --font-size-md: 1rem;       /* 16px */
    --font-size-lg: 1.125rem;   /* 18px */
    --font-size-xl: 1.25rem;    /* 20px */
    --font-size-xxl: 1.5rem;    /* 24px */
    --font-size-xxxl: 2rem;     /* 32px */
    --font-size-hero: 3rem;     /* 48px */
    
    /* Font Weights */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    
    /* Line Heights */
    --line-height-tight: 1.2;   /* Headings */
    --line-height-normal: 1.5;  /* Body text */
    
    /* Borders & Radius */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-pill: 9999px;
    
    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.2);
    --shadow-focus: 0 0 0 3px rgba(65, 105, 225, 0.4);
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.25s ease;
    --transition-slow: 0.4s ease;
    
    /* Z-index layers */
    --z-base: 1;
    --z-above: 10;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-drawer: 300;
    --z-modal: 400;
    --z-popover: 500;
    --z-toast: 600;
    --z-tooltip: 700;
    --z-overlay: 1000;
    
    /* Layout */
    --header-height: 72px;
    --sidebar-width: 240px;
    --max-content-width: 1440px;
    --card-width: 240px;
    --card-height: 360px;
}

/* Dark Mode is Default */
@media (prefers-color-scheme: dark) {
    :root {
        /* Colors stay the same, dark is default */
    }
}

/* Light Mode Overrides */
@media (prefers-color-scheme: light) {
    :root {
        --bg-dark: #F5F5F7;
        --bg-card: #FFFFFF;
        --bg-hover: #F0F0F5;
        
        --text-primary: var(--black);
        --text-secondary: var(--dark-gray);
        --text-tertiary: var(--medium-gray);
        --text-inactive: var(--light-gray);
        
        --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
        --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
        --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.1);
    }
}