/* 
   BuildNet Design System v6.0
   Google Material Design Inspired
   Clean, Minimal, Professional
*/

:root {
    /* ═══════════════════════════════════════════════════════════
       GOOGLE-STYLE COLOR PALETTE
       ═══════════════════════════════════════════════════════════ */
    
    /* Primary Blue (Google Blue) */
    --primary-50: #E8F0FE;
    --primary-100: #D2E3FC;
    --primary-200: #AECBFA;
    --primary-300: #8AB4F8;
    --primary-400: #669DF6;
    --primary-500: #4285F4;
    --primary-600: #1A73E8;
    --primary-700: #1967D2;
    --primary-800: #185ABC;
    --primary-900: #174EA6;

    /* Neutral Gray */
    --gray-50: #F8F9FA;
    --gray-100: #F1F3F4;
    --gray-200: #E8EAED;
    --gray-300: #DADCE0;
    --gray-400: #BDC1C6;
    --gray-500: #9AA0A6;
    --gray-600: #80868B;
    --gray-700: #5F6368;
    --gray-800: #3C4043;
    --gray-900: #202124;

    /* Semantic Colors */
    --success: #34A853;
    --success-light: #E6F4EA;
    --warning: #FBBC04;
    --warning-light: #FEF7E0;
    --error: #EA4335;
    --error-light: #FCE8E6;
    --info: #4285F4;
    --info-light: #E8F0FE;

    /* ═══════════════════════════════════════════════════════════
       BRAND & SURFACE COLORS
       ═══════════════════════════════════════════════════════════ */
    --brand-primary: #1A73E8;
    --brand-on-primary: #FFFFFF;
    --brand-secondary: #5F6368;
    
    --surface: #FFFFFF;
    --surface-variant: #F8F9FA;
    --surface-container: #F1F3F4;
    --on-surface: #202124;
    --on-surface-variant: #5F6368;
    
    --background: #FFFFFF;
    --outline: #DADCE0;
    --outline-variant: #E8EAED;

    /* ═══════════════════════════════════════════════════════════
       SIDEBAR THEME (Dark)
       ═══════════════════════════════════════════════════════════ */
    --sidebar-bg: #202124;
    --sidebar-surface: #292A2D;
    --sidebar-text: rgba(255, 255, 255, 0.87);
    --sidebar-text-secondary: rgba(255, 255, 255, 0.6);
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-active: rgba(138, 180, 248, 0.12);
    --sidebar-active-text: #8AB4F8;
    --sidebar-border: rgba(255, 255, 255, 0.12);
    --sidebar-width: 280px;
    --sidebar-collapsed: 72px;

    /* ═══════════════════════════════════════════════════════════
       ELEVATION (Google Material Shadows)
       ═══════════════════════════════════════════════════════════ */
    --elevation-0: none;
    --elevation-1: 0 1px 2px 0 rgba(60,64,67,0.3), 0 1px 3px 1px rgba(60,64,67,0.15);
    --elevation-2: 0 1px 2px 0 rgba(60,64,67,0.3), 0 2px 6px 2px rgba(60,64,67,0.15);
    --elevation-3: 0 1px 3px 0 rgba(60,64,67,0.3), 0 4px 8px 3px rgba(60,64,67,0.15);
    --elevation-4: 0 2px 3px 0 rgba(60,64,67,0.3), 0 6px 10px 4px rgba(60,64,67,0.15);
    --elevation-5: 0 4px 4px 0 rgba(60,64,67,0.3), 0 8px 12px 6px rgba(60,64,67,0.15);

    /* ═══════════════════════════════════════════════════════════
       TYPOGRAPHY (Google Sans / Roboto Style)
       ═══════════════════════════════════════════════════════════ */
    --font-family: 'Cairo', 'Google Sans', 'Roboto', -apple-system, sans-serif;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Type Scale */
    --text-xs: 0.75rem;
    --text-sm: 0.875rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.25rem;
    --text-2xl: 1.5rem;
    --text-3xl: 1.875rem;

    /* ═══════════════════════════════════════════════════════════
       SPACING (8px Grid System)
       ═══════════════════════════════════════════════════════════ */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;

    /* ═══════════════════════════════════════════════════════════
       BORDER RADIUS (Google Style)
       ═══════════════════════════════════════════════════════════ */
    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* ═══════════════════════════════════════════════════════════
       TRANSITIONS
       ═══════════════════════════════════════════════════════════ */
    --duration-fast: 100ms;
    --duration-normal: 200ms;
    --duration-slow: 300ms;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
    --easing-accelerate: cubic-bezier(0.4, 0, 1, 1);

    /* ═══════════════════════════════════════════════════════════
       Z-INDEX
       ═══════════════════════════════════════════════════════════ */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1070;
    --z-toast: 1080;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL RESET
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-family);
    font-weight: var(--font-weight-regular);
    color: var(--on-surface);
    background: var(--background);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background: var(--primary-100);
    color: var(--primary-900);
}

/* ═══════════════════════════════════════════════════════════════════
   SCROLLBAR (Minimal Google Style)
   ═══════════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--gray-400);
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* ═══════════════════════════════════════════════════════════════════
   FOCUS STATES (Accessibility)
   ═══════════════════════════════════════════════════════════════════ */

:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════ */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

.animate-fade { animation: fadeIn var(--duration-normal) var(--easing-decelerate); }
.animate-slide-up { animation: slideUp var(--duration-normal) var(--easing-decelerate); }
.animate-slide-down { animation: slideDown var(--duration-normal) var(--easing-decelerate); }
.animate-scale { animation: scaleIn var(--duration-normal) var(--easing-decelerate); }

/* Stagger delays */
.delay-1 { animation-delay: 50ms; }
.delay-2 { animation-delay: 100ms; }
.delay-3 { animation-delay: 150ms; }
.delay-4 { animation-delay: 200ms; }

/* ═══════════════════════════════════════════════════════════════════
   UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════ */

.text-primary { color: var(--brand-primary); }
.text-secondary { color: var(--on-surface-variant); }
.text-muted { color: var(--gray-500); }
.text-success { color: var(--success); }
.text-error { color: var(--error); }
.text-warning { color: var(--warning); }

.bg-surface { background: var(--surface); }
.bg-surface-variant { background: var(--surface-variant); }

.elevation-1 { box-shadow: var(--elevation-1); }
.elevation-2 { box-shadow: var(--elevation-2); }
.elevation-3 { box-shadow: var(--elevation-3); }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    html { font-size: 15px; }
    :root { --sidebar-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}