/**
 * Atlas Portal — Design Tokens
 * Centralized CSS custom properties defining the visual language.
 * Single source of truth for colors, spacing, typography, and effects.
 * 
 * Validates: Requirements 3.1, 3.2, 3.3, 3.4, 3.5, 3.6
 */

:root {
    /* ========================================
       Background Layers
       Base dark + progressive surface elevation
       ======================================== */
    --bg-base: #0f1117;
    --bg-surface: rgba(30, 33, 43, 0.8);
    --bg-surface-hover: rgba(40, 44, 58, 0.9);
    --bg-elevated: rgba(25, 28, 36, 0.9);

    /* ========================================
       Glass Morphism
       Backdrop blur, semi-transparent backgrounds, borders
       ======================================== */
    --glass-blur: 12px;
    --glass-bg: rgba(30, 33, 43, 0.06);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-hover: rgba(255, 255, 255, 0.12);

    /* ========================================
       Text Hierarchy
       Primary → Secondary → Tertiary → Muted
       ======================================== */
    --text-primary: #f9fafb;
    --text-secondary: #9ca3af;
    --text-tertiary: #6b7280;
    --text-muted: #4b5563;

    /* ========================================
       Accent Colors
       Semantic color palette for UI indicators
       ======================================== */
    --accent-blue: #3b82f6;
    --accent-green: #22c55e;
    --accent-orange: #f97316;
    --accent-red: #ef4444;
    --accent-purple: #8b5cf6;

    /* ========================================
       Spacing Scale
       8 steps: 4px (2xs) → 64px (3xl)
       ======================================== */
    --space-2xs: 0.25rem;   /* 4px */
    --space-xs: 0.5rem;     /* 8px */
    --space-sm: 0.75rem;    /* 12px */
    --space-md: 1rem;       /* 16px */
    --space-lg: 1.5rem;     /* 24px */
    --space-xl: 2rem;       /* 32px */
    --space-2xl: 3rem;      /* 48px */
    --space-3xl: 4rem;      /* 64px */

    /* ========================================
       Border Radius
       Small → Medium → Large → XL
       ======================================== */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;

    /* ========================================
       Shadows
       Card (subtle) and Elevated (prominent)
       ======================================== */
    --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
    --shadow-elevated: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

    /* ========================================
       Transitions
       Fast (micro-interactions), Base (standard), Slow (panels/modals)
       ======================================== */
    --transition-fast: 150ms ease;
    --transition-base: 200ms ease;
    --transition-slow: 300ms ease;

    /* ========================================
       Layout
       Sidebar dimensions and header height
       ======================================== */
    --sidebar-width: 260px;
    --sidebar-collapsed-width: 64px;
    --header-height: 56px;
}