/* ============================================
 * CSS Variables / Design Tokens
 * Urban Design Toolkit — DaVinci Lab
 * ============================================ */

:root {
    /* Background Colors */
    --bg-primary: #FAFAFA;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F5F5F5;
    --bg-quaternary: #EEEEF0;

    /* Border Colors */
    --border-color: #E5E5E5;
    --border-strong: #D0D0D0;
    --border-focus: #2563EB;

    /* Text Colors */
    --text-primary: #1A1A1A;
    --text-secondary: #666666;
    --text-muted: #999999;
    --text-inverse: #FFFFFF;

    /* Accent Colors */
    --accent: #2563EB;
    --accent-hover: #1D4ED8;
    --accent-light: #EFF6FF;
    --accent-subtle: #DBEAFE;

    /* Status Colors */
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F59E0B;
    --warning-light: #FEF3C7;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --info: #06B6D4;
    --info-light: #CFFAFE;

    /* Tab Colors */
    --tab-program: #8B5CF6;
    --tab-program-light: #EDE9FE;
    --tab-site: #06B6D4;
    --tab-site-light: #CFFAFE;
    --tab-design: #2563EB;
    --tab-design-light: #DBEAFE;
    --tab-renderer: #F97316;
    --tab-renderer-light: #FFF7ED;
    --tab-visualizer: #EC4899;
    --tab-visualizer-light: #FCE7F3;
    --tab-presentation: #10B981;
    --tab-presentation-light: #D1FAE5;
    --tab-narrative: #8B5CF6;
    --tab-narrative-light: #EDE9FE;
    --tab-storyboard: #F59E0B;
    --tab-storyboard-light: #FEF3C7;
    --tab-site-analysis: #0EA5E9;
    --tab-site-analysis-light: #E0F2FE;

    /* Department Colors Palette */
    --dept-colors: #3B82F6, #8B5CF6, #EC4899, #F97316, #10B981, #06B6D4, #EF4444, #F59E0B, #6366F1, #14B8A6;

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.16);

    /* Border Radius */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.1s ease;
    --transition-normal: 0.15s ease;
    --transition-slow: 0.25s ease;

    /* Z-index layers */
    --z-panel: 10;
    --z-topbar: 100;
    --z-dropdown: 200;
    --z-modal: 500;
    --z-tooltip: 1000;

    /* Sizing */
    --topbar-height: 52px;
    --bottombar-height: 32px;
    --sidebar-width: 300px;
}

/* Accessibility: respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    :root {
        --transition-fast: 0s;
        --transition-normal: 0s;
        --transition-slow: 0s;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}