:root {
    /* Primary Colors */
    --primary-color: #F7941D; /* Orange */
    --primary-hover: #E58000; /* Darker orange for hover states */
    --primary-500: #F7941D;
    --primary-400: #F9A947;
    --primary-300: #FABE72;

    /* Neutral Colors */
    --secondary-color: #333333; /* Dark gray */
    --neutral-900: #121212;
    --neutral-800: #333333;
    --neutral-500: #7A7A7A;
    --neutral-300: #CCCCCC;
    --neutral-100: #F5F5F5;
    --light-gray: #F5F5F5;
    --medium-gray: #666666;
    --dark-gray: #1A1A1A;
    --white: #FFFFFF;

    /* Functional Colors */
    --success: #28A745;
    --warning: #FFC107;
    --error: #DC3545;

    /* Transitions */
    --transition: all 0.3s ease; /* Renamed from --transition-base */
    --transition-fast: all 0.15s ease;

    /* Spacing */
    --space-unit: 1rem;
    --space-xxs: calc(0.25 * var(--space-unit));
    --space-xs: calc(0.5 * var(--space-unit));
    --space-sm: calc(0.75 * var(--space-unit));
    --space-md: calc(1.25 * var(--space-unit));
    --space-lg: calc(2 * var(--space-unit));
    --section-padding: 80px 0;
    --card-spacing: 25px;

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

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;

    /* Favicon */
    --favicon-size: 64px;
}