/* ===================================================================== دربني · DARABNY — design tokens · v2 --------------------------------------------------------------------- v2 keeps every v1 variable NAME (111 screens read them) and changes the VALUES, so one file re-skins the whole app. What changed and why: • gradients → flat. --grad-* now resolve to a solid fill. Glossy orange buttons, navy gradient slabs and glow halos were the loudest "generated" tell in the v1 audit; flat brand colour reads as printed, not rendered. • radius scale tightened (cards 16, controls 12, tags 6). Pills stay only for things you CHOOSE (filter chips, segments, search). • elevation is hairline-first. A surface is separated by a 1px line OR a shadow, never both. Real shadows are reserved for things that float. • type is bilingual by construction: Readex Pro (display) + IBM Plex Sans / Plex Sans Arabic (text). Same skeleton in both scripts. • one motion language (tokens at the bottom), reduced-motion safe. DESIGN IDEA — «الدرب» (the path). The logo is a doorway with a beam of light. Everything in the app is a step on the learner's path: search → compare → book → train → certificate → opportunity. Motifs (each one earns its place): ARCH the doorway · frames photos, avatars, the header edge, tab marker PATH a dashed line connecting steps · booking status, refund status BEAM one warm light — only on the splash + success moments, nowhere else Colour = meaning, never decoration: --pri orange → the ONE primary action + brand moments --navy navy → text, structure, dark surfaces --gold gold → ratings · offers · Darabny Scholars --ok green → confirmed / paid / done / fully funded --info blue → information · saved · links --cert violet → certificates & achievements --bad red → failed / refunds / expired / destructive ===================================================================== */ :root{ /* ---------- brand ---------- */ --pri:#FF6B2B; --pri-hi:#FF8348; --pri-lo:#EF5614; --pri-deep:#C2410C; --pri-soft:#FFF0E6; --pri-tint:#FFF7F1; --pri-line:#FFD2BA; --pri-ink:#B93A08; /* orange used AS TEXT on light surfaces (AA 5.9:1 on white) */ --on-pri:#071A3E; /* text ON orange: navy 6.0:1 (white was 2.9:1 and failed AA) */ /* orange ramp (brand = 500) */ --o-50:#FFF6F0; --o-100:#FFE9DA; --o-200:#FFD0B3; --o-300:#FFAE80; --o-400:#FF8A50; --o-500:#FF6B2B; --o-600:#EF5614; --o-700:#C2410C; --o-800:#9A3412; --o-900:#7C2D12; /* v2: flat. Names kept so `background:var(--grad-pri)` keeps working everywhere. */ --grad-pri:linear-gradient(var(--pri),var(--pri)); --grad-pri-rich:linear-gradient(var(--pri),var(--pri)); --glow-pri:0 1px 0 rgba(120,40,0,.22); /* a printed bottom edge, not a halo */ --navy:#071A3E; --navy-2:#0C1C3E; --navy-3:#040E24; --navy-4:#16306B; --navy-soft:#EAEFF8; /* navy ramp (brand ink = 900) */ --n-50:#F4F6FB; --n-100:#E7ECF6; --n-200:#CDD7EB; --n-300:#A3B3D3; --n-400:#6F84AE; --n-500:#47608F; --n-600:#2D4678; --n-700:#1A3163; --n-800:#0E2352; --n-900:#071A3E; --n-950:#040E24; --grad-navy:linear-gradient(var(--navy),var(--navy)); --grad-navy-flat:linear-gradient(var(--navy),var(--navy)); --grad-gold:linear-gradient(var(--gold),var(--gold)); --noise:linear-gradient(transparent,transparent); /* v1 SVG-noise overlay retired */ --gold:#F5C400; --gold-ink:#6E5200; --gold-soft:#FFF7D6; --gold-line:#EBD87F; /* ---------- semantic ---------- */ --ok:#16A34A; --ok-ink:#0C7234; --ok-soft:#E9F6EE; --ok-line:#A9DFBD; --info:#2563EB; --info-ink:#1B49B8; --info-soft:#EDF2FF; --info-line:#BCD0FA; --cert:#7C3AED; --cert-ink:#5B21B6; --cert-soft:#F3EEFF; --cert-line:#D3BFF9; --bad:#E5484D; --bad-ink:#B01F26; --bad-soft:#FDEEEE; --bad-line:#F6BDBF; --warn:#D97706; --warn-ink:#874500; --warn-soft:#FFF4E2; --warn-line:#F5D09A; /* ---------- neutrals (light) — tinted toward the navy, not toward cream ---------- */ --bg:#F2F4F8; --surface:#FFFFFF; --surface-2:#FFF7F1; --surface-3:#F6F8FB; --fg:#071A3E; --fg-2:#22385F; --muted:#52648A; --faint:#5E6D88; --line:#E3E7EF; --line-2:#CFD6E3; --tint:#ECEFF5; --hair:rgba(7,26,62,.06); --scrim:rgba(7,26,62,.52); --focus:#2563EB; /* ---------- elevation (hairline-first) ---------- */ --sh-1:0 0 0 0 transparent; /* flat: the border does the work */ --sh-2:0 1px 2px rgba(7,26,62,.06); /* resting card, optional */ --sh-3:0 12px 32px -8px rgba(7,26,62,.28),0 2px 6px rgba(7,26,62,.08); /* sheets, dialogs, toasts */ --sh-dock:0 -1px 0 var(--line); /* docked tab bar: a line, not a pill */ /* ---------- type ---------- */ --font:"IBM Plex Sans","IBM Plex Sans Arabic","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",sans-serif; --font-display:"Readex Pro","IBM Plex Sans","IBM Plex Sans Arabic","Segoe UI",system-ui,sans-serif; --fs-display:32px; --fs-h1:26px; --fs-h2:21px; --fs-h3:17px; --fs-body:16px; --fs-sm:14px; --fs-xs:12.5px; --lh-tight:1.28; --lh:1.65; --w-text:400; --w-medium:500; --w-strong:600; --w-bold:700; /* ---------- space · radius (4pt grid) ---------- */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:32px; --s8:40px; --gutter:16px; --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:14px; --r-xl:16px; --r-2xl:20px; --r-pill:999px; --r-tag:6px; --r-arch:50% 50% 16px 16px / 38% 38% 16px 16px; /* the doorway shape (percent radii so it never collapses) */ /* ---------- touch · layers ---------- */ --tap:48px; --tap-min:44px; --z-sticky:10; --z-dock:20; --z-fab:25; --z-sheet:40; --z-dialog:50; --z-toast:60; /* ---------- motion (one language) ---------- out = entrances & feedback (fast start, soft landing) in-out= things that move across the screen drawer= sheets (iOS-like) spring= tiny overshoot, ONLY for toggles / favourite / success marks Durations: press 120 · small 200 · medium 320 · large 480. UI motion stays < 320ms; only celebratory moments go to 480+. */ --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1); --ease-drawer:cubic-bezier(.32,.72,0,1); --spring:cubic-bezier(.34,1.4,.64,1); --dur-1:120ms; --dur-2:200ms; --dur-3:320ms; --dur-4:480ms; --stagger:45ms; /* delay between siblings in a list reveal */ /* ---------- artboard ---------- */ --phone-w:390px; --phone-h:844px; --dock-h:72px; /* space the docked tab bar occupies at the bottom */ color-scheme:light; } /* ---------- dark theme: deep navy, never pure black ---------- */ [data-theme="dark"]{ --pri:#FF7A3D; --pri-soft:#2B1A14; --pri-tint:#1B1613; --pri-line:#6B3820; --pri-ink:#FF9A6B; --navy-soft:#16244A; --gold-ink:#F5C400; --gold-soft:#2E2810; --gold-line:#6B5A1C; --ok:#2FBF62; --ok-ink:#5AD68A; --ok-soft:#10301F; --ok-line:#2C6A43; --info:#5B8DFF; --info-ink:#8EAEFF; --info-soft:#14234A; --info-line:#33468A; --cert:#9B6BFF; --cert-ink:#B79AFF; --cert-soft:#221A44; --cert-line:#4A3A8A; --bad:#FF6B70; --bad-ink:#FF9296; --bad-soft:#3A1719; --bad-line:#7A3032; --warn:#F59E0B; --warn-ink:#FFC061; --warn-soft:#33240D; --warn-line:#6B4D18; --bg:#050E22; --surface:#0C1B3A; --surface-2:#0A1733; --surface-3:#0F2145; --fg:#F2F5FB; --fg-2:#D6DEEE; --muted:#B4C2DB; --faint:#94A4C3; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --tint:#14284F; --scrim:rgba(2,8,22,.68); --focus:#8EAEFF; --hair:rgba(255,255,255,.07); --sh-2:0 1px 2px rgba(0,0,0,.4); --sh-3:0 16px 40px -8px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06); --sh-dock:0 -1px 0 var(--line); color-scheme:dark; } @media (prefers-color-scheme:dark){ :root[data-theme="system"]{ --pri:#FF7A3D; --pri-soft:#2B1A14; --pri-tint:#1B1613; --pri-line:#6B3820; --pri-ink:#FF9A6B; --navy-soft:#16244A; --gold-ink:#F5C400; --gold-soft:#2E2810; --gold-line:#6B5A1C; --ok:#2FBF62; --ok-ink:#5AD68A; --ok-soft:#10301F; --ok-line:#2C6A43; --info:#5B8DFF; --info-ink:#8EAEFF; --info-soft:#14234A; --info-line:#33468A; --cert:#9B6BFF; --cert-ink:#B79AFF; --cert-soft:#221A44; --cert-line:#4A3A8A; --bad:#FF6B70; --bad-ink:#FF9296; --bad-soft:#3A1719; --bad-line:#7A3032; --warn:#F59E0B; --warn-ink:#FFC061; --warn-soft:#33240D; --warn-line:#6B4D18; --bg:#050E22; --surface:#0C1B3A; --surface-2:#0A1733; --surface-3:#0F2145; --fg:#F2F5FB; --fg-2:#D6DEEE; --muted:#B4C2DB; --faint:#94A4C3; --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --tint:#14284F; --scrim:rgba(2,8,22,.68); --focus:#8EAEFF; --hair:rgba(255,255,255,.07); --sh-2:0 1px 2px rgba(0,0,0,.4); --sh-3:0 16px 40px -8px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06); --sh-dock:0 -1px 0 var(--line); color-scheme:dark; } } @media (prefers-reduced-motion:reduce){ :root{ --dur-1:0ms; --dur-2:0ms; --dur-3:0ms; --dur-4:0ms; --stagger:0ms; } }