/* ============================================================= tokens.css — Design tokens (single source of truth) Owned by: brand-ux agent. Consumed by: ui-builder + others. Project: دليل الفريلانسر العُماني (Arabic RTL, mobile-first, WCAG AA) Direction: A — "بحر وجبال" (Sea & Mountains) — deep teal + warm sand. NOTE: Do NOT hardcode colors elsewhere. Use these variables only. ============================================================= */ /* --- Google Fonts: Readex Pro (Arabic) + Ubuntu (Latin) --- Ubuntu ships no Arabic glyphs, so it is listed FIRST in the stack and only ever claims Latin characters (Upwork, Figma, gov.om…); every Arabic character falls through to Readex Pro. Order matters — do not swap. */ @import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap'); :root { /* ========================================================= 1. COLOR — Direction A "بحر وجبال" Every text/bg pair below meets WCAG AA (ratios in brand-guide.md) ========================================================= */ /* Primary — deep teal (بحر / سكينة و ثقة) */ --color-primary: #0E7C7B; /* white text on this = 5.0:1 ✅ AA */ --color-primary-hover: #0A6463; /* darker for hover */ --color-primary-active: #084F4E; /* pressed state */ --color-primary-soft: #E3F1F0; /* tint bg for callouts/chips */ /* Accent — warm amber (جبال/رمال، الدفء و التشجيع) — used SPARINGLY */ --color-accent: #E08A1E; /* decorative / large only (2.7:1 on white) */ --color-accent-strong: #A85A00; /* use THIS for accent-colored text (5.1:1) */ --color-accent-soft: #FBEBD2; /* tint bg */ /* Neutrals */ --color-bg: #FAF7F2; /* warm sand page background */ --color-surface: #FFFFFF; /* cards / raised surfaces */ --color-border: #E5E0D8; /* hairline borders / dividers */ --color-text: #17242A; /* primary text (14.9:1 on bg) */ --color-text-secondary: #55636A; /* muted text (5.8:1 on bg) */ --color-text-on-primary:#FFFFFF; /* text over primary fills */ /* Semantic — each with a soft bg variant for callouts. Callout pattern: soft bg + --color-text (dark) = high contrast. */ --color-success: #2E7D32; --color-success-soft: #E4F1E4; --color-warning: #B45309; /* the "الأخطاء الشائعة" section uses this */ --color-warning-soft: #FBEECB; --color-info: #1E6FA8; --color-info-soft: #DCEBF7; /* WhatsApp — official secondary brand green. Chosen over the bright #25D366 because a white glyph on that fails contrast (~2:1); this gives 4.1:1 and sits harmoniously with the site's teal. */ --color-whatsapp: #128C7E; --color-whatsapp-hover: #0E6F64; /* Instagram — brand gradient trimmed to its darker stops so the white glyph keeps ≥4.3:1 contrast (the yellow end would fail). */ --color-instagram: linear-gradient(45deg, #833AB4 0%, #C13584 55%, #E1306C 100%); /* ========================================================= 2. TYPOGRAPHY — tuned for Arabic (generous line-heights) ========================================================= */ --font-heading: 'Ubuntu', 'Readex Pro', system-ui, sans-serif; --font-body: 'Ubuntu', 'Readex Pro', system-ui, sans-serif; /* Fluid type scale (clamp for headings) */ --fs-h1: clamp(2.0rem, 1.3rem + 3.2vw, 3.0rem); /* 32 → 48 */ --fs-h2: clamp(1.6rem, 1.15rem + 2.0vw, 2.25rem); /* 26 → 36 */ --fs-h3: clamp(1.3rem, 1.05rem + 1.1vw, 1.625rem);/* 21 → 26 */ --fs-h4: clamp(1.125rem, 1.0rem + 0.5vw, 1.25rem);/* 18 → 20 */ --fs-lead: 1.1875rem; /* 19px — intro / lead paragraphs */ --fs-body: 1.0625rem; /* 17px — base body */ --fs-small: 0.9375rem; /* 15px */ --fs-caption: 0.8125rem; /* 13px */ /* Line-heights (Arabic needs air) */ --lh-heading: 1.35; --lh-body: 1.8; /* generous for Arabic reading */ --lh-tight: 1.5; --lh-loose: 1.9; /* Weights — Readex Pro ships 400/500/600/700 (max is 700, no 800). --fw-heading-x is capped at 700 so the H1/wordmark use a real weight instead of a browser-synthesized fake bold. */ --fw-body: 400; --fw-medium: 500; --fw-semibold: 600; --fw-heading: 700; --fw-heading-x: 700; /* ========================================================= 3. SPACING — 4px base t-shirt/step scale ========================================================= */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 2.5rem; /* 40px */ --space-8: 3rem; /* 48px */ --space-9: 4rem; /* 64px */ --space-10: 5rem; /* 80px */ --space-11: 6rem; /* 96px */ --space-12: 8rem; /* 128px */ /* ========================================================= 4. RADIUS — rounded & friendly ========================================================= */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; /* ========================================================= 5. SHADOWS — soft, low-contrast (neutral, charcoal-tinted) ========================================================= */ --shadow-sm: 0 1px 2px rgba(23, 36, 42, 0.06), 0 1px 3px rgba(23, 36, 42, 0.05); --shadow-md: 0 4px 12px rgba(23, 36, 42, 0.08), 0 2px 4px rgba(23, 36, 42, 0.05); --shadow-lg: 0 12px 32px rgba(23, 36, 42, 0.12), 0 4px 8px rgba(23, 36, 42, 0.06); /* ========================================================= 6. LAYOUT & READING ========================================================= */ --container-max: 1120px; /* page max width */ --content-max: 760px; /* narrow text column */ --measure: 70ch; /* max reading line length */ --gutter: var(--space-5); /* ========================================================= 7. MOTION & FOCUS ========================================================= */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0.0, 1, 1); --transition-fast: 140ms var(--ease-standard); --transition-base: 220ms var(--ease-standard); --transition-slow: 400ms var(--ease-standard); --focus-ring: 0 0 0 3px #FFFFFF, 0 0 0 6px var(--color-primary); --focus-ring-offset: 2px; /* Signature motif — dotted "journey" path */ --path-color: var(--color-accent); --path-width: 3px; --path-dash: 2 10; /* dash gap for the dotted route line */ } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; } }