/**
 * CSS Custom Properties (Variables)
 * Used across all pages for consistent theming
 */

:root {
    /* Brand Colors */
    --brand: #F28C00;
    --brand-dark: #D67700;

    /* Neutral Colors */
    --dark: #111;
    --black: #000;
    --white: #fff;
    --muted: #666;
    --light-gray: #eee;
    --cream: #fff2d1;

    /* Spacing */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 40px;
    --spacing-xl: 60px;
    --spacing-xxl: 80px;

    /* Typography */
    --font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --font-size-hero: 48px;
    --line-height: 1.6;

    /* Border Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 999px;

    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12);

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

    /* Layout */
    --container-max-width: 1200px;
    --nav-height: 70px;
}