/* ========================================================================== CV LINKER — DESIGN TOKENS (v2, October 2026 redesign) -------------------------------------------------------------------------- The single vocabulary for the whole site. Load this BEFORE every other stylesheet. Every page stylesheet reads these names, so changing a value here restyles every page at once. Identity: the CV Linker wordmark red and charcoal, on a light ground. Structure borrowed from the approved direction: a floating pill header, large Readex Pro headlines, dark charcoal "bands" for contrast, generous rounding, and red used as a signal — primary actions and accents only. Two themes: :root light (default) :root[data-theme="dark"] dark, switched by the header toggle and remembered in localStorage (js/header.js). Both were measured for contrast (ratios in comments, WCAG AA ≥ 4.5:1 for text, ≥ 3:1 for large text and controls). Direction-neutral: use logical properties (margin-inline-start, padding-block) so an Arabic RTL layout comes from the same rules. ========================================================================== */ :root { color-scheme: light; /* ---- surfaces & ink ------------------------------------------------- */ --ground: #F7F7F5; /* page background */ --surface: #FFFFFF; /* cards, panels, header pill */ --sunken: #F0F0EC; /* wells, table headers, chips, disabled */ --line: #E6E6E1; /* borders, dividers */ --line-strong: #D9D9D4; /* field borders, ghost buttons */ --ink: #1B1B1C; /* 16.1:1 on ground — body text, headings (the wordmark charcoal) */ --ink-2: #4A4A4F; /* 8.2:1 — secondary text */ --ink-3: #6B6B70; /* 4.9:1 on ground, 5.3:1 on white — labels, captions, muted */ /* ---- brand ----------------------------------------------------------- */ --primary: #B5121B; /* brand red as TEXT: links, icons, active labels (6.9:1 on white) */ --primary-hover: #9E0F16; /* text hover */ --primary-fill: #B5121B; /* brand red as a FILL: primary buttons, badges (white text 6.9:1) */ --primary-fill-hover: #9E0F16; --on-primary: #FFFFFF; /* text and icons on a primary fill */ --primary-bright:#D3242C; /* large decorative fills, charts */ --primary-tint: #FBECEC; /* hover beds, selected rows, soft badges */ --brand-deep: #8B0000; /* the red inside the wordmark; 8.7:1 on primary-tint */ --accent: #B4531B; /* warm secondary, used sparingly (5.0:1 on white) */ --accent-tint: #FBF1E7; --coral: #F2694E; /* gradient end and accents on dark bands only (5.7:1 on band) */ --gradient-text: linear-gradient(96deg, #8B0000 0%, #C8171F 45%, #F2694E 100%); /* ---- dark bands: charcoal sections on the light page ----------------- */ --band: #1B1B1C; --band-ink: #FFFFFF; /* 17.2:1 */ --band-ink-2: rgba(255,255,255,.72); --band-ink-3: rgba(255,255,255,.56); /* small print on a band (6.5:1) */ --band-accent: #E0343C; /* the red in the wordmark on a band: large text only (3.9:1) */ --band-line: rgba(255,255,255,.12); --band-surface: rgba(255,255,255,.06); --band-surface-2:rgba(255,255,255,.12); /* hover of a band-surface element */ --band-glow: rgba(181,18,27,.45); /* ---- status: reserved. Never reuse these as a chart series. ---------- */ --ok: #17705C; /* approved, available, published (5.3:1 on tint) */ --ok-tint: #E6F3EF; --warn: #8A5B08; /* pending review, expiring (5.3:1 on tint) */ --warn-tint: #FBF2E0; --danger: #B3261E; /* rejected, errors, destructive (5.7:1 on tint) */ --danger-tint: #FBEBEA; --info: #2B4C7E; --info-tint: #E6EEF9; /* ---- chart series: fixed order, never cycled ------------------------- */ --c1:#B5121B; --c2:#1B1B1C; --c3:#3A66B0; --c4:#D97817; --c5:#6B4A9E; --c6:#86A62B; /* ---- type ------------------------------------------------------------ */ /* Both families carry Arabic and Latin. Readex Pro for anything that is a title; Cairo for everything else. Loaded once in functions.php. */ --font-display: "Readex Pro", "Cairo", system-ui, sans-serif; --font-body: "Cairo", "Readex Pro", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "SF Mono", Menlo, monospace; --fs-display: clamp(2.75rem, 5.5vw, 4.5rem); /* 44–72px — page hero */ --fs-h1: clamp(2rem, 3.4vw, 2.75rem); /* 32–44px */ --fs-h2: clamp(1.5rem, 2.4vw, 2rem); /* 24–32px */ --fs-h3: 1.25rem; /* 20px */ --fs-lead: 1.125rem; /* 18px — intro paragraphs */ --fs-body: 1rem; /* 16px */ --fs-sm: 0.875rem; /* 14px */ --fs-micro: 0.75rem; /* 12px — uppercase labels only */ --lh-tight: 1.08; --lh-snug: 1.3; --lh-body: 1.6; --ls-tight: -0.03em; /* display and h1 */ /* ---- spacing: one 8px rhythm ---------------------------------------- */ --sp-1: 8px; --sp-2: 16px; --sp-3: 24px; --sp-4: 32px; --sp-5: 40px; --sp-6: 48px; --sp-8: 64px; --sp-10: 80px; --sp-12: 96px; /* ---- geometry -------------------------------------------------------- */ --r-sm: 8px; --r-md: 12px; --r-lg: 20px; /* cards */ --r-xl: 28px; /* bands, large panels */ --r-full: 999px; /* buttons, chips, the header pill */ --sh-1: 0 1px 2px rgba(27,27,28,.04), 0 2px 6px rgba(27,27,28,.04); --sh-2: 0 2px 4px rgba(27,27,28,.03), 0 16px 40px -24px rgba(27,27,28,.14); --sh-3: 0 4px 8px rgba(27,27,28,.05), 0 30px 60px -30px rgba(27,27,28,.22); --sh-header: 0 10px 30px -10px rgba(27,27,28,.18); --ease: cubic-bezier(.4,0,.2,1); --dur: .18s; --container: 1320px; /* header pill, footer and page content share this frame */ --gutter: 24px; --header-h: 66px; --header-gap: 14px; /* space above the floating pill */ } /* -------------------------------------------------------------------------- DARK THEME — opt-in through the header toggle (data-theme="dark" on ). Not wired to prefers-color-scheme on purpose: Elementor-built pages carry their own colours, and an OS-triggered switch would flip only half the page. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --ground: #121214; --surface: #1B1B1C; --sunken: #232326; --line: #2E2E33; --line-strong: #3A3A40; --ink: #F2F2F0; /* 16.7:1 */ --ink-2: #B8B8B3; /* 9.4:1 */ --ink-3: #8E8E8A; /* 5.7:1 on ground, 5.2:1 on surface */ --primary: #F0646B; /* red as TEXT on dark grounds (6.0:1) */ --primary-hover: #F58A8F; --primary-fill: #C8171F; /* red as a FILL: white text reads 5.8:1 */ --primary-fill-hover: #D1262E; --on-primary: #FFFFFF; --primary-bright:#C8171F; --primary-tint: rgba(240,100,107,.16); --brand-deep: #F0646B; --accent: #F2A06A; --accent-tint: rgba(242,160,106,.14); --coral: #F2694E; --band: #232326; /* bands sit a step lighter than the page */ --band-ink: #FFFFFF; --band-ink-2: rgba(255,255,255,.72); --band-ink-3: rgba(255,255,255,.56); --band-accent: #E8474E; /* a step brighter: the band is lighter here (3.9:1) */ --band-line: rgba(255,255,255,.12); --band-surface: rgba(255,255,255,.06); --band-surface-2:rgba(255,255,255,.12); --band-glow: rgba(200,23,31,.45); --ok: #4FC3A1; --ok-tint: rgba(79,195,161,.14); --warn: #E2B45A; --warn-tint: rgba(226,180,90,.14); --danger: #F08279; --danger-tint: rgba(240,130,121,.14); --info: #8FB4F0; --info-tint: rgba(143,180,240,.14); --c1:#F0646B; --c2:#E8E8E3; --c3:#6F95D6; --c4:#E8A24F; --c5:#A98BD9; --c6:#A6C25A; --sh-1: 0 1px 2px rgba(0,0,0,.4); --sh-2: 0 2px 4px rgba(0,0,0,.4), 0 16px 40px -24px rgba(0,0,0,.6); --sh-3: 0 4px 8px rgba(0,0,0,.4), 0 30px 60px -30px rgba(0,0,0,.7); --sh-header: 0 10px 30px -10px rgba(0,0,0,.6); } /* A dark band paints its own ground whatever the theme. */ .cvl-band { background: var(--band); color: var(--band-ink); } .cvl-band h1, .cvl-band h2, .cvl-band h3, .cvl-band h4 { color: var(--band-ink); } .cvl-band p { color: var(--band-ink-2); }