/* ============================================================================= tokens.css — design tokens (primitive -> semantic) + theming The ONLY place raw brand colors are declared. Components consume semantics. ========================================================================== */ /* ---------- BRAND FONT: Helvetica Neue LT Arabic (licensed, client-supplied) ---------- The official identity face. Three weights mapped onto ranges so the real files serve all used weights (no synthetic bold). Files live in assets/fonts/. */ @font-face { font-family: 'Helvetica Neue LT Arabic'; src: url('../assets/fonts/helvetica-neue-lt-arabic-45-light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Arabic'; src: url('../assets/fonts/helvetica-neue-lt-arabic-55-roman.ttf') format('truetype'); font-weight: 400 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Helvetica Neue LT Arabic'; src: url('../assets/fonts/helvetica-neue-lt-arabic-75-bold.ttf') format('truetype'); font-weight: 600 800; font-style: normal; font-display: swap; } :root { /* ---------- PRIMITIVES (brand, theme-agnostic) ---------- */ --c-purple: #A751C0; --c-pink: #EF97CA; --c-lpurple: #D5ACE8; --c-yellow: #FEE451; --c-dpurple: #3E2458; --c-navy: #000D2E; --c-white: #FFFFFF; --c-black: #000000; --c-bg-light: #EFF2F4; /* ---------- FONTS ---------- */ --font-en: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Brand Arabic = HelveticaNeue LT Arabic (licensed, supplied by the client and @font-face'd above). Free faces kept only as a load fallback. */ --font-ar: 'Helvetica Neue LT Arabic', 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', sans-serif; --font-active: var(--font-ar); /* ---------- SPACING / RADIUS / MOTION ---------- */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.5rem; --space-9: 7rem; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-xl: 32px; --radius-block: 22%; /* logomark square corner radius */ --container: 1180px; --ease-cinematic: cubic-bezier(.16, 1, .3, 1); --ease-out: cubic-bezier(.22, .61, .36, 1); --dur-fast: .2s; --dur: .4s; --dur-slow: .8s; /* ---------- Z-INDEX SCALE ---------- */ --z-three: 0; --z-base: 1; --z-portal: 50; --z-nav: 100; --z-launcher: 200; --z-lightbox: 800; --z-loader: 9999; /* ---------- SEMANTIC (LIGHT is default) ---------- */ --surface-bg: var(--c-bg-light); --surface-raised: var(--c-white); --surface-sunken: #e3e8ee; --text-primary: var(--c-navy); --text-muted: #44506a; --text-on-accent: var(--c-white); --brand-primary: var(--c-purple); --brand-secondary: var(--c-pink); --brand-accent: var(--c-yellow); --border-subtle: rgba(0, 13, 46, .12); --ring: var(--c-purple); /* Client direction: ONE brand colour with tonal variation (no rainbow). Purple deep→mid keeps white text readable across the whole sweep. Pink/yellow stay as small accent tokens elsewhere — not in this primary gradient. */ --gradient-brand: linear-gradient(135deg, var(--c-dpurple), var(--c-purple)); /* glass (light) */ --glass-bg: rgba(255, 255, 255, .55); --glass-border: rgba(255, 255, 255, .7); --glass-blur: 16px; --glass-shadow: 0 8px 32px rgba(62, 36, 88, .16); /* liquid-glass extras (used by css/liquid-glass.css) */ --lg-rim: rgba(255, 255, 255, .92); /* bright top/edge highlight */ --lg-rim-soft: rgba(255, 255, 255, .20); /* faint full rim line */ --lg-float: 0 2px 6px rgba(62, 36, 88, .06), 0 16px 34px -14px rgba(62, 36, 88, .30), 0 34px 60px -30px rgba(62, 36, 88, .22); --lg-tint-1: color-mix(in srgb, var(--c-lpurple) 30%, transparent); /* prism: violet */ --lg-tint-2: color-mix(in srgb, #8fd0ff 26%, transparent); /* prism: cool */ --lg-tint-3: color-mix(in srgb, var(--c-pink) 24%, transparent); /* prism: pink */ --lg-tint-4: color-mix(in srgb, var(--c-yellow) 20%, transparent); /* prism: warm */ /* logomark live colors — sampled from the official logo file (traced 2026-07-13). Decoupled from the general --c-* brand tokens so ONLY the mark uses these exact vivid hues; the rest of the site keeps its softer brand palette. */ --mark-tl: #E7BEF2; /* lavender */ --mark-tr: #FEE451; /* yellow */ --mark-c: #F169BB; /* vivid magenta centre */ --mark-bl: #FEE451; /* yellow */ --mark-br: #B251CF; /* purple */ } /* ---------- DARK THEME ---------- */ [data-theme="dark"] { --surface-bg: #15151b; /* neutral charcoal — lets brand colors pop hardest */ --surface-raised: #20212b; /* clearly lighter so cards/inputs read as surfaces */ --surface-sunken: #0f0f14; --text-primary: var(--c-white); --text-muted: #b9bdca; /* neutral light grey for comfortable contrast */ --text-on-accent: var(--c-navy); --brand-primary: var(--c-lpurple); /* lift purple for contrast on navy */ --brand-secondary: var(--c-pink); --brand-accent: var(--c-yellow); --border-subtle: rgba(255, 255, 255, .14); --ring: var(--c-lpurple); /* dark: tonal purple, lifted so navy text on it stays readable */ --gradient-brand: linear-gradient(135deg, var(--c-purple), var(--c-lpurple)); --glass-bg: rgba(40, 42, 54, .60); /* neutral lifted glass, clearly above the page */ --glass-border: rgba(255, 255, 255, .14); --glass-shadow: 0 16px 40px rgba(0, 0, 0, .55); /* liquid-glass extras (dark: a soft WHITE top rim reads as real glass edge) */ --lg-rim: rgba(255, 255, 255, .26); --lg-rim-soft: rgba(255, 255, 255, .10); --lg-float: 0 2px 8px rgba(0, 0, 0, .4), 0 20px 44px -16px rgba(0, 0, 0, .72), 0 40px 70px -34px rgba(0, 0, 0, .6); --lg-tint-1: color-mix(in srgb, var(--c-lpurple) 34%, transparent); --lg-tint-2: color-mix(in srgb, #7fb6ff 32%, transparent); --lg-tint-3: color-mix(in srgb, var(--c-pink) 30%, transparent); --lg-tint-4: color-mix(in srgb, var(--c-yellow) 24%, transparent); /* mark keeps the official vivid hues in dark too (they read well on navy) */ --mark-tl: #E7BEF2; --mark-tr: #FEE451; --mark-c: #F169BB; --mark-bl: #FEE451; --mark-br: #B251CF; } /* language -> active font (class set on by the head bootstrap + i18n.js) */ .lang-ar { --font-active: var(--font-ar); } .lang-en { --font-active: var(--font-en); }