/* 
   ==========================================================================
   1-variables.css
   ==========================================================================
   This file contains all the Global CSS Variables used throughout the website.
   It acts as a single source of truth for colors, spacing, and transitions.
   
   If you want to change the theme color, background, or spacing, 
   this is the place to do it.
*/

:root {
    /* Primary brand color - Vibrant Orange */
    --primary-color: #ff4500;

    /* Hover state for primary actions */
    --hover-color: #ff6347;

    /* Main Background Color - Very Dark Grey/Black for Dark Mode */
    --bg-color: #121212;

    /* Card Background Color - Slightly lighter than bg for contrast */
    --card-bg: #1e1e1e;

    /* Standard Text Color - Off-white for readability on dark bg */
    --text-color: #e0e0e0;

    /* Heading Text Color - Pure White */
    --heading-color: #ffffff;

    /* Standard Section Padding */
    --section-padding: 2rem 1rem;

    /* Global Border Radius for cards and inputs */
    --border-radius: 12px;

    /* Default Transition settings for smooth animations */
    --transition: all 0.3s ease;
}