/**
 * CSS Variables and Base Styles
 * 
 * Common variables and base styles used across the theme
 */

:root {
    /* Colors */
    --color-primary: #C60F01;
    --color-primary-hover: #a00d01;
    --color-text: #1a1a1a;
    --color-text-light: #807D79;
    --color-bg-dark: #181919F2;
    --color-bg-overlay: rgba(0, 0, 0, 0.5);
    --color-border: #e0e0e0;
    --color-white: #ffffff;
    
    /* Spacing */
    --spacing-xs: clamp(6px, 1.5vw, 10px);
    --spacing-sm: clamp(8px, 2vw, 12px);
    --spacing-md: clamp(10px, 2vw, 20px);
    --spacing-lg: clamp(16px, 2.5vw, 24px);
    --spacing-xl: clamp(20px, 3vw, 32px);
    
    /* Border Radius */
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 18px;
    
    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Z-index layers */
    --z-overlay: 999;
    --z-sidebar: 1000;
    --z-tooltip: 9999;
    
    /* Typography */
    --font-primary: Jost, Arial, sans-serif;
    --font-size-sm: clamp(12px, 2vw, 14px);
    --font-size-base: clamp(14px, 2.5vw, 18px);
    --font-size-lg: clamp(16px, 3vw, 20px);
    
    /* Layout */
    --sidebar-width: 300px;
    --sidebar-width-max: 85vw;
}

/* Base reset for custom components */
.custom-component {
    box-sizing: border-box;
}

/* Common utility classes */
.text-center {
    text-align: center;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}