/* ========================================================================== Awad Tech — Design Tokens Light is the default. Dark is applied via [data-theme="dark"] on . Both themes are designed independently, not inverted. ========================================================================== */ :root{ /* ---- brand ---- */ --brand-50:#EEF4FF; --brand-100:#DCE7FF; --brand-200:#BBD0FF; --brand-500:#2B6CF6; --brand-600:#1B4FD8; --brand-700:#1740AE; --gold-400:#D8B876; --gold-500:#C5A059; --gold-600:#9A7433; /* ---- light theme surfaces ---- */ --bg:#F6F8FC; --bg-alt:#EDF2F9; --surface:#FFFFFF; --surface-2:#F2F6FC; --surface-raised:#FFFFFF; /* ---- light theme ink ---- */ --text:#0B1526; --text-2:#44546F; --text-3:#5A6780; /* meets 4.5:1 on --surface at 14px */ --text-invert:#FFFFFF; /* ---- light theme roles ---- */ --primary:var(--brand-600); --primary-hover:var(--brand-700); --primary-soft:var(--brand-50); --on-primary:#FFFFFF; /* darkened from the raw brand gold so 11-13px accent text clears 4.5:1 on both --surface and --accent-soft in light mode */ --accent:#7A5A22; --accent-soft:rgba(122,90,34,.11); --border:#DCE4EF; --border-strong:#BFCCDF; --ring:var(--brand-600); --success:#12734A; --warning:#8A5B00; --danger:#B3261E; --success-soft:rgba(18,115,74,.10); --danger-soft:rgba(179,38,30,.09); --shadow-sm:0 1px 2px rgba(11,21,38,.06),0 1px 3px rgba(11,21,38,.05); --shadow-md:0 4px 12px rgba(11,21,38,.07),0 2px 4px rgba(11,21,38,.04); --shadow-lg:0 18px 44px rgba(11,21,38,.12),0 4px 12px rgba(11,21,38,.06); --hero-ink:#F2F6FF; --hero-ink-2:#B9C8E6; /* ---- typography ---- */ --font-display:"Sora","IBM Plex Sans Arabic",system-ui,sans-serif; --font-body:"IBM Plex Sans Arabic",system-ui,-apple-system,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; --fs-display:clamp(2.25rem,1.35rem + 3.4vw,4rem); --fs-h1:clamp(1.95rem,1.3rem + 2.4vw,3rem); --fs-h2:clamp(1.6rem,1.16rem + 1.6vw,2.35rem); --fs-h3:clamp(1.18rem,1.05rem + .5vw,1.45rem); --fs-lead:clamp(1.02rem,.97rem + .25vw,1.18rem); --fs-body:1rem; --fs-sm:.9rem; --fs-label:.72rem; --lh-tight:1.14; --lh-snug:1.3; --lh-body:1.68; --tracking-label:.14em; /* ---- space & shape ---- */ --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem; --sp-8:4rem; --sp-9:6rem; --section-y:clamp(3.5rem,2rem + 6vw,7rem); --gutter:clamp(1.15rem,.6rem + 2.4vw,3rem); --maxw:1200px; --maxw-prose:66ch; --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px; /* ---- motion ---- */ --ease-out:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --dur-fast:.18s; --dur:.32s; --dur-slow:.7s; --nav-h:72px; color-scheme:light; } [data-theme="dark"]{ --bg:#080D1A; --bg-alt:#0C1424; --surface:#101A2E; --surface-2:#16223A; --surface-raised:#18253E; --text:#E9EEF9; --text-2:#A6B5D0; --text-3:#7E8FAE; --text-invert:#0B1526; --primary:#5B93FF; --primary-hover:#8AB2FF; --primary-soft:rgba(91,147,255,.13); --on-primary:#06101F; --accent:var(--gold-400); --accent-soft:rgba(216,184,118,.13); --border:rgba(148,172,214,.17); --border-strong:rgba(148,172,214,.34); --ring:#8AB2FF; --success:#4ED08C; --warning:#E9B44C; --danger:#FF8A80; --success-soft:rgba(78,208,140,.13); --danger-soft:rgba(255,138,128,.12); --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow-md:0 6px 18px rgba(0,0,0,.42); --shadow-lg:0 22px 54px rgba(0,0,0,.55); --hero-ink:#F2F6FF; --hero-ink-2:#B9C8E6; color-scheme:dark; }