:root {
    /* Default theme colors (fallbacks) */
    --color-primary: #071e49;
    --color-secondary: #f9c404;
    --color-accent: #071e49;
    
    /* Convert hex to RGB for opacity support */
    --color-primary-rgb: 7, 30, 73;
    --color-secondary-rgb: 249, 196, 4;
    --color-accent-rgb: 7, 30, 73;
    
    /* Navigation specific */
    --nav-bg-color: var(--color-primary);
    
    /* Variations */
    --color-primary-lighter: rgba(var(--color-primary-rgb), 0.1);
    --color-primary-light: rgba(var(--color-primary-rgb), 0.5);
    --color-primary-dark: color-mix(in srgb, var(--color-primary), #000 20%);
    
    --color-secondary-lighter: rgba(var(--color-secondary-rgb), 0.1);
    --color-secondary-light: rgba(var(--color-secondary-rgb), 0.5);
    --color-secondary-dark: color-mix(in srgb, var(--color-secondary), #000 20%);
    
    --color-accent-lighter: rgba(var(--color-accent-rgb), 0.1);
    --color-accent-light: rgba(var(--color-accent-rgb), 0.5);
    --color-accent-dark: color-mix(in srgb, var(--color-accent), #000 20%);

    /* Brand colors based on organization theme */
    --tw-brand-50: color-mix(in srgb, var(--color-primary) 5%, white);
    --tw-brand-100: color-mix(in srgb, var(--color-primary) 10%, white);
    --tw-brand-200: color-mix(in srgb, var(--color-primary) 20%, white);
    --tw-brand-300: color-mix(in srgb, var(--color-primary) 30%, white);
    --tw-brand-400: color-mix(in srgb, var(--color-primary) 40%, white);
    --tw-brand-500: var(--color-primary);
    --tw-brand-600: color-mix(in srgb, var(--color-primary) 85%, black);
    --tw-brand-700: color-mix(in srgb, var(--color-primary) 70%, black);
    --tw-brand-800: color-mix(in srgb, var(--color-primary) 55%, black);
    --tw-brand-900: color-mix(in srgb, var(--color-primary) 40%, black);
    --tw-brand-950: color-mix(in srgb, var(--color-primary) 25%, black);
}

/* Brand color utility classes */
.text-brand-50 { color: var(--tw-brand-50); }
.text-brand-100 { color: var(--tw-brand-100); }
.text-brand-200 { color: var(--tw-brand-200); }
.text-brand-300 { color: var(--tw-brand-300); }
.text-brand-400 { color: var(--tw-brand-400); }
.text-brand-500 { color: var(--tw-brand-500); }
.text-brand-600 { color: var(--tw-brand-600); }
.text-brand-700 { color: var(--tw-brand-700); }
.text-brand-800 { color: var(--tw-brand-800); }
.text-brand-900 { color: var(--tw-brand-900); }
.text-brand-950 { color: var(--tw-brand-950); }

.bg-brand-50 { background-color: var(--tw-brand-50); }
.bg-brand-100 { background-color: var(--tw-brand-100); }
.bg-brand-200 { background-color: var(--tw-brand-200); }
.bg-brand-300 { background-color: var(--tw-brand-300); }
.bg-brand-400 { background-color: var(--tw-brand-400); }
.bg-brand-500 { background-color: var(--tw-brand-500); }
.bg-brand-600 { background-color: var(--tw-brand-600); }
.bg-brand-700 { background-color: var(--tw-brand-700); }
.bg-brand-800 { background-color: var(--tw-brand-800); }
.bg-brand-900 { background-color: var(--tw-brand-900); }
.bg-brand-950 { background-color: var(--tw-brand-950); }

.border-brand-50 { border-color: var(--tw-brand-50); }
.border-brand-100 { border-color: var(--tw-brand-100); }
.border-brand-200 { border-color: var(--tw-brand-200); }
.border-brand-300 { border-color: var(--tw-brand-300); }
.border-brand-400 { border-color: var(--tw-brand-400); }
.border-brand-500 { border-color: var(--tw-brand-500); }
.border-brand-600 { border-color: var(--tw-brand-600); }
.border-brand-700 { border-color: var(--tw-brand-700); }
.border-brand-800 { border-color: var(--tw-brand-800); }
.border-brand-900 { border-color: var(--tw-brand-900); }
.border-brand-950 { border-color: var(--tw-brand-950); }