/* Vercel/Linear Inspired Design System */
:root {
    /* Colors - Dark Mode Default */
    --bg-main: #000000;
    --bg-secondary: #0A0A0A;
    --bg-tertiary: #111111;
    --bg-card: rgba(255, 255, 255, 0.03);
    --bg-card-hover: rgba(255, 255, 255, 0.05);
    
    --border-color: #222222;
    --border-color-hover: #333333;
    
    --text-primary: #FFFFFF;
    --text-secondary: #A1A1AA;
    --text-tertiary: #71717A;
    
    --accent-primary: #FFFFFF; /* High contrast white for buttons/accents */
    --accent-glow: rgba(255, 255, 255, 0.1);
    
    --success: #10B981;
    --warning: #F59E0B;
    --danger: #EF4444;
    --info: #3B82F6;

    /* Fonts */
    --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Fluid Typography: 320px to 1440px */
    --text-xs: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
    --text-sm: clamp(0.875rem, 0.84rem + 0.18vw, 1rem);
    --text-base: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
    --text-lg: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem);
    --text-xl: clamp(1.5rem, 1.35rem + 0.71vw, 2rem);
    --text-2xl: clamp(2rem, 1.71rem + 1.43vw, 3rem);
    --text-3xl: clamp(2.5rem, 2.14rem + 1.79vw, 3.75rem);
    --text-4xl: clamp(3rem, 2.5rem + 2.5vw, 5rem);
    
    /* Fluid Spacing */
    --space-xs: clamp(0.25rem, 0.21rem + 0.18vw, 0.375rem);
    --space-sm: clamp(0.5rem, 0.46rem + 0.18vw, 0.625rem);
    --space-md: clamp(1rem, 0.93rem + 0.36vw, 1.25rem);
    --space-lg: clamp(1.5rem, 1.36rem + 0.71vw, 2rem);
    --space-xl: clamp(2rem, 1.71rem + 1.43vw, 3rem);
    --space-2xl: clamp(3rem, 2.57rem + 2.14vw, 4.5rem);
    --space-3xl: clamp(4rem, 3.5rem + 2.5vw, 6rem);
    
    /* Layout */
    --max-width: 1200px;
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 24px;
    
    /* Safe Areas for Mobile Notches */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
}

/* Light Mode Theme */
:root[data-theme="light"] {
    --bg-main: #FFFFFF;
    --bg-secondary: #FAFAFA;
    --bg-tertiary: #F4F4F5;
    --bg-card: #FFFFFF;
    --bg-card-hover: #F4F4F5;
    
    --border-color: #E4E4E7;
    --border-color-hover: #D4D4D8;
    
    --text-primary: #09090B;
    --text-secondary: #52525B;
    --text-tertiary: #A1A1AA;
    
    --accent-primary: #000000;
    --accent-glow: rgba(0, 0, 0, 0.05);
}