/* =====================================================
   VAULT V11 - CSS Variables & Theme System
   Centralized design tokens for consistent theming
   ===================================================== */

/* Satoshi Font */
@import url('https://api.fontshare.com/v2/css?f[]=satoshi@400,500,700,900&display=swap');

:root {
    /* =====================================================
       Color Palette - Pink Theme
       ===================================================== */
    
    /* Primary accent - Pink */
    --accent: #ff6b9d;
    --accent-light: #ff8fb3;
    --accent-dark: #e05080;
    --accent-bg: rgba(255, 107, 157, 0.1);
    --accent-glow: 0 0 10px rgba(255, 107, 157, 0.4), 0 0 20px rgba(255, 107, 157, 0.2);
    
    /* Background colors */
    --bg-primary: #0e0e0e;
    --bg-secondary: #141414;
    --bg-tertiary: #1a1a1a;
    --bg-card: #161616;
    --bg-hover: #1f1f1f;
    --bg-input: #0a0a0a;
    
    /* Text colors */
    --text-primary: #ffffff;
    --text-secondary: #b0b0b0;
    --text-muted: #6b6b6b;
    --text-disabled: #404040;
    
    /* Border colors */
    --border-primary: #2a2a2a;
    --border-secondary: #3a3a3a;
    --border-hover: #4a4a4a;
    --border-focus: var(--accent);
    
    /* Status colors */
    --success: #4ade80;
    --warning: #fbbf24;
    --error: #f87171;
    --info: #60a5fa;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
    --shadow-accent: 0 4px 20px rgba(255, 107, 157, 0.25);
    
    /* =====================================================
       Typography
       ===================================================== */
    
    --font-family: 'Satoshi', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
    
    /* Font sizes - responsive clamp() */
    --text-xs: clamp(0.625rem, 0.6rem + 0.125vw, 0.75rem);
    --text-sm: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
    --text-base: clamp(0.875rem, 0.8rem + 0.375vw, 1rem);
    --text-lg: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
    --text-xl: clamp(1.125rem, 1rem + 0.625vw, 1.25rem);
    --text-2xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem);
    --text-3xl: clamp(1.5rem, 1.3rem + 1vw, 1.875rem);
    --text-4xl: clamp(1.875rem, 1.5rem + 1.875vw, 2.25rem);
    
    /* Font weights */
    --font-normal: 400;
    --font-medium: 500;
    --font-bold: 700;
    --font-black: 900;
    
    /* Line heights */
    --leading-tight: 1.25;
    --leading-normal: 1.5;
    --leading-relaxed: 1.75;
    
    /* =====================================================
       Spacing - responsive
       ===================================================== */
    
    --space-1: clamp(0.25rem, 0.2rem + 0.25vw, 0.375rem);
    --space-2: clamp(0.5rem, 0.4rem + 0.5vw, 0.75rem);
    --space-3: clamp(0.75rem, 0.6rem + 0.75vw, 1rem);
    --space-4: clamp(1rem, 0.8rem + 1vw, 1.5rem);
    --space-5: clamp(1.5rem, 1.2rem + 1.5vw, 2rem);
    --space-6: clamp(2rem, 1.5rem + 2.5vw, 3rem);
    --space-8: clamp(3rem, 2rem + 5vw, 5rem);
    
    /* =====================================================
       Border Radius
       ===================================================== */
    
    --radius-sm: 0.375rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
    --radius-2xl: 1.5rem;
    --radius-full: 9999px;
    
    /* =====================================================
       Transitions
       ===================================================== */
    
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;
    
    /* =====================================================
       Z-Index Scale
       ===================================================== */
    
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-tooltip: 600;
    --z-toast: 700;
    
    /* =====================================================
       Layout
       ===================================================== */
    
    --nav-height: clamp(3rem, 2.5rem + 2.5vw, 4rem);
    --sidebar-width: 280px;
    --max-content-width: 1400px;
    --container-padding: clamp(1rem, 0.5rem + 2.5vw, 2rem);
}

/* =====================================================
   Chromebook-specific optimizations
   Typical Chromebook: 1366x768 or 1920x1080
   ===================================================== */

@media (min-width: 1024px) and (max-width: 1440px) {
    :root {
        --container-padding: 1.5rem;
        --nav-height: 3.5rem;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {
    :root {
        --container-padding: 1rem;
        --nav-height: 3rem;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
    :root {
        /* Larger touch targets */
        --touch-target-min: 44px;
    }
}