:root {
    /* === PRIMARY COLORS === */
    --primary-yellow: #FED403;
    --primary-yellow-dark: #f9d629;
    --primary-yellow-darker: #fbd116;
    --primary-yellow-light: #FEE34D;
    --primary-yellow-dark: #FFF176;
    --primary-yellow-pale: #FFFDE7;
    
    /* === SECONDARY COLORS === */
    --secondary-orange: #FF9800;
    --secondary-orange-dark: #F57C00;
    --secondary-orange-light: #FFB74D;
    
    /* === NEUTRAL COLORS === */
    --white: #FFFFFF;
    --black: #000000;
    --gray-light: #F8F9FA;
    --gray-medium: #E9ECEF;
    --gray-dark: #6C757D;
    --gray-darker: #495057;
    
    /* === TEXT COLORS === */
    --text-primary: #574a02;          /* Main text color */
    --text-secondary: #7b6901;        /* Secondary text */
    --text-tertiary: #999999;         /* Light text */     /* White text */
    --text-yellow-primary: #433502;     /* Yellow text primary */
    --text-yellow-secondary: #433502;     /* Yellow text secondary */
    --text-yellow-light: var(--primary-yellow-light);       /* Yellow text light */
    --text-orange-primary: var(--secondary-orange-dark);     /* Orange text primary */
    --text-orange-secondary: var(--secondary-orange);        /* Orange text secondary */
    
    /* === BACKGROUND COLORS === */
    /* Main Backgrounds */
    --bg-primary: var(--white);                              /* Main background */
    --bg-secondary: var(--gray-light);                       /* Secondary background */
    --bg-yellow-primary: var(--primary-yellow);              /* Yellow background primary */
    --bg-yellow-secondary: var(--primary-yellow-dark);       /* Yellow background secondary */
    --bg-yellow-darker: var(--primary-yellow-darker);        /* Yellow background darker */
    --bg-yellow-light: var(--primary-yellow-light);          /* Yellow background light */
    --bg-yellow-pale: var(--primary-yellow-pale);            /* Yellow background pale */
    --bg-orange-primary: var(--secondary-orange);            /* Orange background primary */
    --bg-orange-secondary: var(--secondary-orange-dark);     /* Orange background secondary */
    
    /* Gradient Backgrounds */
    --bg-gradient-yellow-primary: linear-gradient(135deg, var(--primary-yellow), var(--primary-yellow-dark));
    --bg-gradient-yellow-secondary: linear-gradient(135deg, var(--primary-yellow-darker), var(--primary-yellow-dark));
    --bg-gradient-yellow-light: linear-gradient(180deg, var(--primary-yellow-pale), var(--primary-yellow-lighter));
    --bg-gradient-orange: linear-gradient(45deg, var(--secondary-orange), var(--secondary-orange-dark));
    --bg-gradient-white-yellow: linear-gradient(45deg, var(--white), var(--primary-yellow-pale));
    
    /* Transparent Backgrounds */
    --bg-white-alpha-10: rgba(255, 255, 255, 0.1);
    --bg-white-alpha-15: rgba(255, 255, 255, 0.15);
    --bg-white-alpha-20: rgba(255, 255, 255, 0.2);
    --bg-yellow-alpha-10: rgba(254, 212, 3, 0.1);
    --bg-yellow-alpha-15: rgba(254, 212, 3, 0.15);
    --bg-yellow-alpha-20: rgba(254, 212, 3, 0.2);
    
    /* === BORDER COLORS === */
    --border-light: #E0E0E0;
    --border-medium: #CCCCCC;
    --border-dark: var(--gray-dark);
    --border-yellow-light: rgba(254, 212, 3, 0.1);
    --border-yellow-medium: var(--primary-yellow-light);
    --border-yellow-dark: var(--primary-yellow-dark);
    --border-white-alpha: rgba(255, 255, 255, 0.2);
    
    /* === FUNCTIONAL COLORS === */
    --success-green: #4CAF50;
    --error-red: #F44336;
    --warning-orange: var(--secondary-orange);
    --info-blue: #2196F3;
    
    /* === SHADOW COLORS === */
    --shadow-light: rgba(254, 212, 3, 0.1);
    --shadow-medium: rgba(254, 212, 3, 0.2);
    --shadow-dark: rgba(254, 212, 3, 0.3);
    --shadow-black-light: rgba(0, 0, 0, 0.1);
    --shadow-black-medium: rgba(0, 0, 0, 0.2);
    --shadow-black-dark: rgba(0, 0, 0, 0.3);
}