/* ===========================
   COMPLETE CSS VARIABLES
   All colors used across all files
   =========================== */

:root {
    /* ===== PRIMARY COLORS ===== */
    --color-primary: #B92525;           /* Main red - firebrick */
    --color-primary-dark: #8B1D1D;      /* Dark red */
    --color-primary-hover: #8B2332;     /* Hover red */
    --color-primary-light: #6d1a27;     /* Light red */
    --color-firebrick: #B92525;         /* Alias for primary */
    
    /* ===== SECONDARY COLORS ===== */
    --color-secondary: #F8B531;         /* Main yellow - goldenrod */
    --color-secondary-hover: #e8b461;   /* Hover yellow */
    --color-secondary-dark: #E5A328;    /* Dark yellow */
    --color-secondary-alt: #e8a521;     /* Alt yellow */
    --color-secondary-darker: #E0A020;  /* Darker yellow */
    --color-goldenrod: #F8B531;         /* Alias for secondary */
    
    /* ===== NEUTRAL COLORS ===== */
    --color-black: #000000;             /* Black */
    --color-black-alt: #000;            /* Black alt */
    --color-white: #FFFFFF;             /* White */
    --color-white-alt: #fff;            /* White alt */
    --color-whitesmoke: #F5F5F5;        /* Whitesmoke */
    --color-gainsboro: #DCDCDC;         /* Gainsboro gray */
    
    /* ===== GRAY SCALE ===== */
    --color-gray-darkest: #2C2C2C;      /* Darkest gray */
    --color-gray-darker: #333;          /* Darker gray */
    --color-gray-dark: #555;            /* Dark gray */
    --color-gray-medium: #666;          /* Medium gray */
    --color-gray: #999;                 /* Gray */
    --color-gray-light: #C4C4C4;        /* Light gray */
    --color-gray-lighter: #D9D9D9;      /* Lighter gray */
    --color-gray-lightest: #E0E0E0;     /* Lightest gray */
    
    /* ===== BACKGROUND COLORS ===== */
    --color-bg-cream: #F5F5DC;          /* Cream background */
    --color-bg-light: #F5F5F5;          /* Light background */
    --color-bg-lighter: #F0F0F0;        /* Lighter background */
    --color-bg-lightest: #f4f4f4;       /* Lightest background */
    --color-bg-yellow-light: #FFFBF5;   /* Light yellow bg */
    --color-bg-yellow-lighter: #FFF9E6; /* Lighter yellow bg */
    --color-bg-yellow-alt: #FFF8E8;     /* Alt yellow bg */
    --color-bg-blue-light: #E2EDF9;     /* Light blue bg */
    
    /* ===== SPECIFIC COLORS ===== */
    --color-text-dark: #5F5F5F;         /* Dark text */
    
    /* ===== FONTS ===== */
    --font-primary: 'Nunito', 'Arial', sans-serif;
    --font-nunito: 'Nunito', sans-serif;  /* Alias */
    
    /* ===== RGBA COLORS (Most Used) ===== */
    --shadow-light: rgba(0, 0, 0, 0.15);
    --shadow-medium: rgba(0, 0, 0, 0.2);
    --overlay-dark: rgba(0, 0, 0, 0.95);
    --overlay-medium: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(0, 0, 0, 0.1);
    --overlay-lighter: rgba(0, 0, 0, 0.08);
    --overlay-lightest: rgba(0, 0, 0, 0.05);
}

/* ===========================
   USAGE NOTES:
   
   Color Aliases:
   - --color-firebrick = --color-primary (#B92525)
   - --color-goldenrod = --color-secondary (#F8B531)
   - --color-whitesmoke = --color-bg-light (#F5F5F5)
   - --font-nunito = --font-primary
   
   These aliases are for compatibility with existing code
   that uses these variable names.
   
   =========================== */