/* ============================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   ============================================ */

:root {
    /* 4-Color Palette */
    --color-background: #f0efe5;
    --color-background-darker: color-mix(in srgb,var(--color-background),#000 8%);
    --color-text: #232e33;
    --color-primary: #ac5648;
    --color-secondary: #2e5554;

    /* Spacing */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;

    /* Typography */
    --font-family-base: sans-serif;
    --font-family-mono: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    --font-size-xs: 12px;
    --font-size-sm: 13px;
    --font-size-base: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 24px;

    /* Layout */
    --sidebar-width: 250px;
    --minimap-width: 70px;
    --topbar-height: 62px;

    /* Z-index Layers */
    --z-minimap: 95;
    --z-sidebar: 100;
    --z-topbar: 100;
    --z-modal: 1000;
    --z-detail: 1000;
    --z-detail-controls: 1002;
    --z-context-menu: 10000;
    --z-toast: 10000;
    --z-max: 10000;
}