/* U TOPIA design tokens: single source of truth. Sections must read these, not redefine colours. */
:root{
 /* Brand palette (approved by Mohamed) */
 --ut-navy:#00033D;
 --ut-blue:#0033FF;
 --ut-blueHover:#0029CC;
 --ut-lavender:#977DFF;
 --ut-surface:#EAEDF8;
 --ut-ink:#030812;
 --ut-paper:#FFFFFF;
 --ut-black:#000000;
 --ut-blueLight:var(--ut-lavender);

 /* Functional colours */
 --ut-muted:#49516A;
 --ut-line:#C6CEE7;
 --ut-success:#216B45;
 --ut-error:#B42318;
 --ut-disabled-text:#6B7690;
 --ut-disabled-fill:rgba(198,206,231,.45);

 /* Logo */
 --ut-logo-u:var(--ut-blue);
 --ut-logo-topia:var(--ut-black);
 --ut-logo-u-reverse:var(--ut-lavender);
 --ut-logo-topia-reverse:var(--ut-paper);

 /* Type */
 --ut-display:Panchang,sans-serif;
 --ut-heading-ar:Alexandria,sans-serif;
 --ut-body-ar:Alexandria,'IBM Plex Sans Arabic',sans-serif;
 --ut-body-en:Inter,sans-serif;
 --ut-ui-en:Orbitron,Inter,sans-serif;

 /* Shape and material */
 --ut-radius-field:12px;--ut-radius-control:999px;--ut-radius-card:24px;--ut-radius-campaign:32px;
 --ut-glass-fill:rgba(255,255,255,.48);--ut-glass-border:rgba(255,255,255,.82);
 --ut-glass-blur:32px;--ut-glass-blur-store:12px;--ut-glass-blur-mobile:0px;
 --ut-glass-shadow:0 12px 40px rgba(0,3,61,.12);

 /* Layout and motion */
 --ut-container:1280px;--ut-gutter-mobile:20px;--ut-gutter-desktop:48px;--ut-tap:44px;
 --ut-motion:180ms ease-out;
 --ut-focus-ring:0 0 0 3px rgba(0,51,255,.35);

 --ut-space-1:4px;--ut-space-2:8px;--ut-space-3:12px;--ut-space-4:16px;
 --ut-space-6:24px;--ut-space-8:32px;--ut-space-12:48px;--ut-space-16:64px;
 --ut-space-24:96px;--ut-space-32:128px;
}