/* Brand Colors Variables */
:root {
    /* Primary Brand Colors */
    --brand-blue: #01a499;
    --brand-yellow: #fcb71e;
    --brand-orange: #e67725;
    
    /* Color variations */
    --brand-blue-dark: #00917a;
    --brand-yellow-dark: #e6a01c;
    --brand-orange-dark: #d4621e;
    --brand-blue-light: rgba(1, 164, 153, 0.1);
    --brand-yellow-light: rgba(252, 183, 30, 0.1);
    
    /* Gradients - Primary now uses blue → yellow */
    --gradient-primary: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-yellow) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--brand-blue-dark) 0%, var(--brand-yellow-dark) 100%);
    --gradient-accent: linear-gradient(90deg, var(--brand-yellow) 0%, var(--brand-orange) 100%);
    --gradient-success: linear-gradient(135deg, var(--brand-blue-light) 0%, var(--brand-yellow-light) 100%);
    
    /* Shadow colors */
    --shadow-primary: rgba(1, 164, 153, 0.3);
    --shadow-primary-hover: rgba(1, 164, 153, 0.4);
    --focus-ring: rgba(1, 164, 153, 0.1);
    
    /* Background colors */
    --bg-decoration: radial-gradient(circle, rgba(1, 164, 153, 0.05) 0%, transparent 70%);
    --overlay: rgba(0, 0, 0, 0.2);
}

/* Brand color utility classes */
.text-brand-blue { color: var(--brand-blue); }
.text-brand-yellow { color: var(--brand-yellow); }
.text-brand-orange { color: var(--brand-orange); }

.bg-brand-blue { background-color: var(--brand-blue); }
.bg-brand-yellow { background-color: var(--brand-yellow); }
.bg-brand-orange { background-color: var(--brand-orange); }

.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-accent { background: var(--gradient-accent); }

.border-brand-blue { border-color: var(--brand-blue); }
.border-brand-yellow { border-color: var(--brand-yellow); }
.border-brand-orange { border-color: var(--brand-orange); }