/* Atlas palettes, on every page (pairs with atlas-palette.js). Red on black is the company identity and the default;
 * the others are the visitor's choice. Every colour is "r, g, b" so rgba() can add alpha. Sand, the light one, is offered
 * only on pages built for it (<html data-pal-light>); elsewhere a saved Sand shows as Ocean, its dark twin. */

:root, :root[data-xp-pal="red"] { --xp-c-bg: 5, 6, 8; --xp-c-bg2: 11, 12, 16; --xp-c-ink: 244, 245, 247; --xp-c-a: 255, 42, 74; --xp-c-a2: 196, 0, 37;
  --xp-c-b: 255, 209, 216; --xp-c-card: 255, 255, 255; --xp-c-on-card: 11, 12, 16; --xp-c-on-a: 255, 255, 255; }
:root[data-xp-pal="ocean"] { --xp-c-bg: 6, 22, 38; --xp-c-bg2: 10, 33, 55; --xp-c-ink: 232, 243, 250; --xp-c-a: 46, 230, 214; --xp-c-a2: 20, 168, 160;
  --xp-c-b: 255, 184, 77; --xp-c-card: 238, 250, 252; --xp-c-on-card: 7, 31, 46; --xp-c-on-a: 3, 32, 38; }
:root[data-xp-pal="violet"] { --xp-c-bg: 17, 14, 44; --xp-c-bg2: 27, 22, 66; --xp-c-ink: 238, 233, 255; --xp-c-a: 150, 130, 255; --xp-c-a2: 110, 90, 235;
  --xp-c-b: 72, 238, 190; --xp-c-card: 246, 243, 255; --xp-c-on-card: 25, 20, 62; --xp-c-on-a: 17, 14, 44; }
:root[data-xp-pal="sand"] { --xp-c-bg: 243, 237, 226; --xp-c-bg2: 230, 221, 205; --xp-c-ink: 31, 44, 56; --xp-c-a: 9, 110, 112; --xp-c-a2: 6, 86, 88;
  --xp-c-b: 214, 110, 52; --xp-c-card: 255, 251, 243; --xp-c-on-card: 31, 44, 56; --xp-c-on-a: 255, 249, 238; }

/* the site's own colour variables follow the palette (the reds written out in full are repainted by atlas-palette.js) */
:root[data-xp-pal]:not([data-xp-pal="red"]) {
  --red: rgb(var(--xp-c-a)); --red2: rgb(var(--xp-c-a2));
  --bg: rgb(var(--xp-c-bg)); --bg2: rgb(var(--xp-c-bg2)); --bg3: rgb(var(--xp-c-bg2));
  --anv-red: rgb(var(--xp-c-a2)); --anv-red-2: rgb(var(--xp-c-a)); --anv-bg: rgba(var(--xp-c-bg), .82); --anv-bg-solid: rgba(var(--xp-c-bg), .94); --anv-panel: rgb(var(--xp-c-bg2));
  --aui-red: rgb(var(--xp-c-a2)); --aui-red-2: rgb(var(--xp-c-a));
  --aui-cur-accent: var(--xp-c-a);
}
html[data-xp-pal]:not([data-xp-pal="red"]) body { background-color: rgb(var(--xp-c-bg)); }
html[data-xp-pal]:not([data-xp-pal="red"]) :is(.primary-btn, .anv-btn--primary, .atlas-footer-button-primary) { color: rgb(var(--xp-c-on-a)) !important; }

/* the switcher looks the same in every palette, so choosing one never changes the switcher itself */
html body :is(.aui-pal, #xpPal) { background: rgba(12, 13, 18, .88) !important; border: 1px solid rgba(255, 255, 255, .14) !important; }
html body :is(.aui-pal, #xpPal) > span, html body :is(.aui-pal, #xpPal) > span span { color: rgba(255, 255, 255, .72) !important; }
html body :is(.aui-pal, #xpPal) > button { box-shadow: 0 0 0 1px rgba(255, 255, 255, .18); }
html body :is(.aui-pal, #xpPal) > button.on { border-color: #fff !important; box-shadow: 0 0 0 3px rgba(255, 255, 255, .25); }

/* the light palette (Sand) lightens the page only: the header, its menus, the phone drawer and the campaign bar stay dark,
   so their light text keeps its contrast */
html[data-xp-pal="sand"] { --anv-bg: rgba(14, 16, 22, .86); --anv-bg-solid: rgba(14, 16, 22, .95); --anv-panel: #14161d; --anv-text: #f4f5f7; --anv-muted: rgba(244, 245, 247, .7); --anv-line: rgba(255, 255, 255, .1); }
html[data-xp-pal="sand"] body #siteHeader.site-header { background: rgba(14, 16, 22, .9) !important; -webkit-backdrop-filter: saturate(140%) blur(14px); backdrop-filter: saturate(140%) blur(14px); border-bottom-color: rgba(255, 255, 255, .08) !important; }
html[data-xp-pal="sand"] body #siteHeader .anv-panel { background: #14161d !important; border-color: rgba(255, 255, 255, .1) !important; }
html[data-xp-pal="sand"] body #siteHeader :is(.anv-link, .anv-panel a, .anv-col b, .anv-toggle) { color: rgba(244, 245, 247, .86) !important; }
html[data-xp-pal="sand"] body #siteHeader .anv-link.is-active, html[data-xp-pal="sand"] body #siteHeader .anv-panel a:hover { color: #fff !important; }
html[data-xp-pal="sand"] .anv-sheet { background: #14161d !important; }
html[data-xp-pal="sand"] .atb { background: linear-gradient(90deg, #14161d, #0b0c10) !important; }

/* the switcher, bottom left on every page (the home page draws its own, #xpPal) */
.aui-pal { position: fixed; z-index: 9998; left: max(16px, env(safe-area-inset-left, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px));
  display: flex; gap: 6px; align-items: center; padding: 6px; border-radius: 99px; background: rgba(var(--xp-c-bg), .8); border: 1px solid rgba(var(--xp-c-ink), .12);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 12px 40px rgba(0, 0, 0, .3); font-family: Tajawal, Inter, system-ui, sans-serif; }
html body .aui-pal > span { padding: 0 8px; color: rgba(var(--xp-c-ink), .64) !important; font-size: 12px; font-weight: 800; }
.aui-pal button { width: 30px; height: 30px; margin: 0; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; background: var(--sw); transition: transform .2s, border-color .2s; }
.aui-pal button:hover { transform: scale(1.12); }
.aui-pal button.on { border-color: rgb(var(--xp-c-ink)); }
.aui-pal-tip { position: absolute; bottom: calc(100% + 14px); left: 0; width: min(280px, calc(100vw - 32px)); padding: 14px 16px; border-radius: 18px;
  background: rgb(var(--xp-c-card)); box-shadow: 0 24px 60px rgba(0, 0, 0, .45); display: grid; gap: 6px; text-align: start; animation: aui-tip-in .5s cubic-bezier(.34, 1.56, .64, 1) both; }
.aui-pal-tip[hidden] { display: none; }
.aui-pal-tip::after { content: ""; position: absolute; top: 100%; left: 26px; border: 8px solid transparent; border-top-color: rgb(var(--xp-c-card)); }
@keyframes aui-tip-in { from { opacity: 0; transform: translateY(10px) scale(.85); } }
html body .aui-pal-tip strong { color: rgb(var(--xp-c-on-card)) !important; font-size: 15px; font-weight: 900; }
html body .aui-pal-tip p { margin: 0; color: rgba(var(--xp-c-on-card), .72) !important; font-size: 13px; line-height: 1.6; }
html body .aui-pal-tip .ok { justify-self: start; width: auto; height: auto; margin-top: 4px; padding: 7px 16px; border: 0; border-radius: 99px; cursor: pointer;
  background: rgb(var(--xp-c-a)); color: rgb(var(--xp-c-on-a)) !important; font: 800 13px Tajawal, Inter, sans-serif; }
html body .aui-pal-tip .x { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border: 0; border-radius: 50%; padding: 0; cursor: pointer;
  background: rgba(var(--xp-c-on-card), .08); color: rgb(var(--xp-c-on-card)) !important; font-size: 12px; }
html[dir="rtl"] body .aui-pal-tip .x { right: auto; left: 8px; }
@media (max-width: 600px) { .aui-pal { padding: 4px; gap: 4px; } .aui-pal > span { display: none; } .aui-pal button { width: 24px; height: 24px; } }
@media (prefers-reduced-motion: reduce) { .aui-pal-tip { animation: none; } }