/** * Brand themes — remap the primary ramp via `data-brand` on . * Used by DgaBrandService. Default (no attr / green) keeps palette.css primary. */ :root[data-brand='blue'] { --dga-color-primary-25: var(--dga-color-blue-25); --dga-color-primary-50: var(--dga-color-blue-50); --dga-color-primary-100: var(--dga-color-blue-100); --dga-color-primary-200: var(--dga-color-blue-200); --dga-color-primary-300: var(--dga-color-blue-300); --dga-color-primary-400: var(--dga-color-blue-400); --dga-color-primary-500: var(--dga-color-blue-500); --dga-color-primary-600: var(--dga-color-blue-600); --dga-color-primary-700: var(--dga-color-blue-700); --dga-color-primary-800: var(--dga-color-blue-800); --dga-color-primary-900: var(--dga-color-blue-900); --dga-color-primary-950: var(--dga-color-blue-950); --dga-color-primary-alpha-10: var(--dga-color-blue-alpha-10); --dga-color-primary-alpha-20: var(--dga-color-blue-alpha-20); --dga-color-primary-alpha-30: color-mix(in srgb, var(--dga-color-blue-600) 30%, transparent); --dga-color-primary-alpha-40: color-mix(in srgb, var(--dga-color-blue-600) 40%, transparent); --dga-color-primary-alpha-50: color-mix(in srgb, var(--dga-color-blue-600) 50%, transparent); --dga-color-primary-alpha-60: color-mix(in srgb, var(--dga-color-blue-600) 60%, transparent); --dga-color-primary-alpha-70: color-mix(in srgb, var(--dga-color-blue-600) 70%, transparent); --dga-color-primary-alpha-80: color-mix(in srgb, var(--dga-color-blue-600) 80%, transparent); --dga-color-primary-alpha-90: color-mix(in srgb, var(--dga-color-blue-600) 90%, transparent); } :root[data-brand='purple'] { --dga-color-primary-25: var(--dga-color-tertiary-25); --dga-color-primary-50: var(--dga-color-tertiary-50); --dga-color-primary-100: var(--dga-color-tertiary-100); --dga-color-primary-200: var(--dga-color-tertiary-200); --dga-color-primary-300: var(--dga-color-tertiary-300); --dga-color-primary-400: var(--dga-color-tertiary-400); --dga-color-primary-500: var(--dga-color-tertiary-500); --dga-color-primary-600: var(--dga-color-tertiary-600); --dga-color-primary-700: var(--dga-color-tertiary-700); --dga-color-primary-800: var(--dga-color-tertiary-800); --dga-color-primary-900: var(--dga-color-tertiary-900); --dga-color-primary-950: var(--dga-color-tertiary-950); --dga-color-primary-alpha-10: var(--dga-color-tertiary-alpha-10); --dga-color-primary-alpha-20: var(--dga-color-tertiary-alpha-20); --dga-color-primary-alpha-30: color-mix(in srgb, var(--dga-color-tertiary-600) 30%, transparent); --dga-color-primary-alpha-40: color-mix(in srgb, var(--dga-color-tertiary-600) 40%, transparent); --dga-color-primary-alpha-50: color-mix(in srgb, var(--dga-color-tertiary-600) 50%, transparent); --dga-color-primary-alpha-60: color-mix(in srgb, var(--dga-color-tertiary-600) 60%, transparent); --dga-color-primary-alpha-70: color-mix(in srgb, var(--dga-color-tertiary-600) 70%, transparent); --dga-color-primary-alpha-80: color-mix(in srgb, var(--dga-color-tertiary-600) 80%, transparent); --dga-color-primary-alpha-90: color-mix(in srgb, var(--dga-color-tertiary-600) 90%, transparent); } :root[data-brand='gold'] { --dga-color-primary-25: var(--dga-color-secondary-25); --dga-color-primary-50: var(--dga-color-secondary-50); --dga-color-primary-100: var(--dga-color-secondary-100); --dga-color-primary-200: var(--dga-color-secondary-200); --dga-color-primary-300: var(--dga-color-secondary-300); --dga-color-primary-400: var(--dga-color-secondary-400); --dga-color-primary-500: var(--dga-color-secondary-500); --dga-color-primary-600: var(--dga-color-secondary-600); --dga-color-primary-700: var(--dga-color-secondary-700); --dga-color-primary-800: var(--dga-color-secondary-800); --dga-color-primary-900: var(--dga-color-secondary-900); --dga-color-primary-950: var(--dga-color-secondary-950); --dga-color-primary-alpha-10: color-mix(in srgb, var(--dga-color-secondary-600) 10%, transparent); --dga-color-primary-alpha-20: color-mix(in srgb, var(--dga-color-secondary-600) 20%, transparent); --dga-color-primary-alpha-30: color-mix(in srgb, var(--dga-color-secondary-600) 30%, transparent); --dga-color-primary-alpha-40: color-mix(in srgb, var(--dga-color-secondary-600) 40%, transparent); --dga-color-primary-alpha-50: color-mix(in srgb, var(--dga-color-secondary-600) 50%, transparent); --dga-color-primary-alpha-60: color-mix(in srgb, var(--dga-color-secondary-600) 60%, transparent); --dga-color-primary-alpha-70: color-mix(in srgb, var(--dga-color-secondary-600) 70%, transparent); --dga-color-primary-alpha-80: color-mix(in srgb, var(--dga-color-secondary-600) 80%, transparent); --dga-color-primary-alpha-90: color-mix(in srgb, var(--dga-color-secondary-600) 90%, transparent); } :root[data-brand='teal'] { --dga-color-primary-25: var(--dga-color-green-25); --dga-color-primary-50: var(--dga-color-green-50); --dga-color-primary-100: var(--dga-color-green-100); --dga-color-primary-200: var(--dga-color-green-200); --dga-color-primary-300: var(--dga-color-green-300); --dga-color-primary-400: var(--dga-color-green-400); --dga-color-primary-500: var(--dga-color-green-500); --dga-color-primary-600: var(--dga-color-green-600); --dga-color-primary-700: var(--dga-color-green-700); --dga-color-primary-800: var(--dga-color-green-800); --dga-color-primary-900: var(--dga-color-green-900); --dga-color-primary-950: var(--dga-color-green-950); --dga-color-primary-alpha-10: var(--dga-color-green-alpha-10); --dga-color-primary-alpha-20: var(--dga-color-green-alpha-20); --dga-color-primary-alpha-30: color-mix(in srgb, var(--dga-color-green-600) 30%, transparent); --dga-color-primary-alpha-40: color-mix(in srgb, var(--dga-color-green-600) 40%, transparent); --dga-color-primary-alpha-50: color-mix(in srgb, var(--dga-color-green-600) 50%, transparent); --dga-color-primary-alpha-60: color-mix(in srgb, var(--dga-color-green-600) 60%, transparent); --dga-color-primary-alpha-70: color-mix(in srgb, var(--dga-color-green-600) 70%, transparent); --dga-color-primary-alpha-80: color-mix(in srgb, var(--dga-color-green-600) 80%, transparent); --dga-color-primary-alpha-90: color-mix(in srgb, var(--dga-color-green-600) 90%, transparent); } /* * Seasonal occasion packs (formal DGA templates): * - Hajj → keep default DGA green (#1B8354) — hajj-option-1 does not remap brand * - Foundation Day → heritage brown (#6C4E46) — SaudiFoundingDayTwo * - National Day 96 → keep default DGA green; campaign colours live in the hero * Only the primary ramp remaps — components keep working unchanged. */ :root[data-brand='foundation'] { --dga-color-primary-25: #fbf9f8; --dga-color-primary-50: #f8f5f4; --dga-color-primary-100: #cabfbc; --dga-color-primary-200: #b3a39f; --dga-color-primary-300: #9b8781; --dga-color-primary-400: #846a64; --dga-color-primary-500: #7a5a52; --dga-color-primary-600: #6c4e46; --dga-color-primary-700: #5b423b; --dga-color-primary-800: #493530; --dga-color-primary-900: #271c19; --dga-color-primary-950: #160f0d; --dga-color-primary-alpha-10: color-mix(in srgb, #6c4e46 10%, transparent); --dga-color-primary-alpha-20: color-mix(in srgb, #6c4e46 20%, transparent); --dga-color-primary-alpha-30: color-mix(in srgb, #6c4e46 30%, transparent); --dga-color-primary-alpha-40: color-mix(in srgb, #6c4e46 40%, transparent); --dga-color-primary-alpha-50: color-mix(in srgb, #6c4e46 50%, transparent); --dga-color-primary-alpha-60: color-mix(in srgb, #6c4e46 60%, transparent); --dga-color-primary-alpha-70: color-mix(in srgb, #6c4e46 70%, transparent); --dga-color-primary-alpha-80: color-mix(in srgb, #6c4e46 80%, transparent); --dga-color-primary-alpha-90: color-mix(in srgb, #6c4e46 90%, transparent); }