/* ============================================
   HABITAT CALCULATOR - CSS VARIABLES
   Additional variables for layout and components
   Note: Theme variables are defined in theme.css
   ============================================ */

:root {
    /* If theme.css doesn't define these, provide fallbacks */

    /* Spacing Fallbacks */
    --space-xs: var(--spacing-xs, 4px);
    --space-sm: var(--spacing-sm, 8px);
    --space-md: var(--spacing-md, 16px);
    --space-lg: var(--spacing-lg, 24px);
    --space-xl: var(--spacing-xl, 32px);

    /* Typography Fallbacks */
    --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-xs: 12px;
    --font-size-sm: 14px;
    --font-size-md: 16px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;

    /* Shadows Fallbacks */
    --shadow-sm: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.12));
    --shadow-md: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.15));
    --shadow-lg: var(--shadow-lg, 0 10px 20px rgba(0, 0, 0, 0.15));

    /* Border Radius Fallbacks */
    --radius-sm: var(--border-radius-sm, 4px);
    --radius-md: var(--border-radius-md, 8px);
    --radius-lg: var(--border-radius-lg, 12px);
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease-in-out;
    --transition-normal: 0.3s ease-in-out;
    --transition-slow: 0.5s ease-in-out;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-popover: 1060;
    --z-tooltip: 1070;

    /* Color Fallbacks from theme.css */
    --bg-primary: var(--bg-primary, #ffffff);
    --bg-secondary: var(--bg-secondary, #fafaf0);
    --text-primary: var(--text-primary, #2c3e50);
    --text-secondary: var(--text-secondary, #5a6c7d);
    --text-muted: var(--text-muted, #8b9dc3);
    --border-color: var(--pastel-gray, #e8e8e8);
}

/* Dark Mode Variables (Optional) */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2a2a2a;
        --text-primary: #ffffff;
        --text-secondary: #b0b0b0;
        --text-muted: #808080;
        --border-color: #404040;
    }
}