/* ============================================================================ SADER — DESIGN TOKENS The single source of truth for the SADER design system. ---------------------------------------------------------------------------- Positioning : "The Legal Reference of the Arab World" — est. 1863, Beirut. Tone : Hermès / Louis Vuitton / Porsche tier. Restrained, editorial, cinematic. Austere, modern, design-forward. ---------------------------------------------------------------------------- PALETTE — WHITE · BLACK · MINIMAL (monochrome). Pure white grounds, light-grey surfaces, charcoal-ink text. The accent is INK itself (weight + rule-work), not colour. Dark sections are near-black. No brown, no gold, no cool hues. WHITE #FFFFFF primary light ground OFF-WHITE #FAFAFA alternating section ground GREY-CARD #F5F5F5 card / panel surface GREY-2 #EFEFEF input / secondary surface HAIRLINE #E6E6E6 light divider rules INK #111111 charcoal text + THE accent (rules, labels, CTAs) BLACK #000000 accent hover / pressed MUTED #6E6E6E secondary text FAINT #9A9A9A meta / captions NEAR-BLACK #0E0E0E dark-section ground ---------------------------------------------------------------------------- ACCENT LAW (monochrome): the "accent" is ink (#111). It is applied to RULES, UNDERLINES, BORDERS, small TAGS, single accent WORDS, icon strokes, and the one solid CTA (black fill, white text). On dark sections the accent flips to WHITE automatically. No colour hues anywhere — the system is grayscale. Legacy token names (--brass, --oxblood, --parchment…) are KEPT but remapped to monochrome values so all existing component/section CSS resolves cleanly. ============================================================================ */ :root { /* ---- Raw palette (names kept; remapped to monochrome) ----------------- */ --ink-brown: #0E0E0E; /* near-black — dark-section ground */ --espresso: #161616; /* dark surface */ --espresso-2: #1F1F1F; /* raised dark surface / hover on dark */ --coffee: #2E2E2E; /* dark border / midtone */ --parchment: #FFFFFF; /* white — primary light ground */ --parchment-2: #F5F5F5; /* light grey — card / input ground */ --ivory: #FAFAFA; /* raised light surface / alt ground */ --sand: #E6E6E6; /* light hairline / divider */ --brass: #111111; /* THE accent — ink (was antique gold) */ --brass-hi: #000000; /* accent hover — black */ --brass-deep: #2A2A2A; /* accent pressed */ --oxblood: #111111; /* tag bg — ink */ --oxblood-hi: #2A2A2A; --text-on-dark: #F4F4F4; --text-on-dark-soft: rgba(244, 244, 244, 0.66); --text-on-dark-faint: rgba(244, 244, 244, 0.42); --text-on-light: #111111; --text-on-light-soft: #6E6E6E; --text-on-light-faint: #9A9A9A; /* ---- Neutral greys ---------------------------------------------------- */ --grey-900: #141414; --grey-700: #3A3A3A; --grey-500: #6E6E6E; --grey-300: #B5B5B5; --grey-100: #ECECEC; /* ====================================================================== */ /* SEMANTIC TOKENS — default theme is LIGHT (white ground). Dark sections opt in via [data-theme="dark"] (see override block). */ /* ====================================================================== */ --bg: #FFFFFF; /* page ground — pure white */ --bg-alt: #FAFAFA; /* alternating section ground */ --surface: #F5F5F5; /* raised card / panel */ --surface-2: #EFEFEF; /* input / secondary surface */ --text: var(--text-on-light); --text-muted: var(--text-on-light-soft); --text-faint: var(--text-on-light-faint); --line: #E6E6E6; /* hairline divider */ --line-strong: #D6D6D6; --line-brass: #111111; /* accent rule — ink (small use) */ --accent: var(--brass); /* ink */ --accent-strong: var(--brass-hi); /* black */ --accent-deep: var(--brass-deep); --on-accent: #FFFFFF; /* text on a solid ink fill */ --tag-bg: var(--oxblood); /* ink */ --tag-text: #FFFFFF; --overlay-grad: linear-gradient( to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 46%, rgba(0, 0, 0, 0.08) 100%); --focus-ring: #111111; /* ====================================================================== */ /* TYPOGRAPHY */ /* ====================================================================== */ /* Latin: Fraunces (high-contrast editorial serif) + Inter (grotesque). Arabic: Almarai (clean geometric sans — used for both display & body; 800 weight carries headings, so hierarchy is preserved without a serif). The Arabic stacks are swapped in via [dir="rtl"] in base.css. */ --font-serif: "Fraunces", "Cormorant Garamond", "Times New Roman", Georgia, serif; --font-sans: "Inter", "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-serif-ar: "Almarai", "Tajawal", "Segoe UI", Tahoma, sans-serif; --font-sans-ar: "Almarai", "Tajawal", "Segoe UI", Tahoma, sans-serif; /* Active display / body families — remapped under [dir="rtl"] */ --font-display: var(--font-serif); --font-body: var(--font-sans); /* Fluid type scale — clamp() fluid from 375px → 2560px viewports. Display tiers are intentionally cinematic; body stays highly legible. */ --fs-display-1: clamp(3.5rem, 1.6rem + 7.8vw, 8.5rem); /* 56 → 136 */ --fs-display-2: clamp(2.75rem, 1.6rem + 4.9vw, 5.5rem); /* 44 → 88 */ --fs-display-3: clamp(2.25rem, 1.45rem + 3.4vw, 4rem); /* 36 → 64 */ --fs-h1: clamp(2rem, 1.4rem + 2.55vw, 3.25rem); /* 32 → 52 */ --fs-h2: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);/* 26 → 40 */ --fs-h3: clamp(1.375rem, 1.15rem + 0.95vw, 1.875rem);/* 22 → 30 */ --fs-h4: clamp(1.125rem, 1.0rem + 0.5vw, 1.375rem);/* 18 → 22 */ --fs-lead: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem);/* 18 → 22 */ --fs-body: clamp(1rem, 0.96rem + 0.18vw, 1.125rem); /* 16 → 18 */ --fs-small: 0.9375rem; /* 15 */ --fs-caption: 0.8125rem; /* 13 */ --fs-micro: 0.6875rem; /* 11 */ /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; /* Line heights */ --lh-tight: 0.98; /* monumental display */ --lh-display: 1.05; /* headlines */ --lh-snug: 1.25; /* sub-heads */ --lh-body: 1.65; /* Latin body */ --lh-body-ar: 1.85; /* Arabic body needs more leading */ /* Tracking */ --tracking-display: -0.02em; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-wider: 0.14em; --tracking-eyebrow: 0.22em; /* small-caps labels */ /* ====================================================================== */ /* SPACING SCALE — 8px base. Used for vertical rhythm & gaps. */ /* ====================================================================== */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.5rem; /* 24 */ --space-6: 2rem; /* 32 */ --space-7: 2.5rem; /* 40 */ --space-8: 3rem; /* 48 */ --space-9: 4rem; /* 64 */ --space-10: 5rem; /* 80 */ --space-11: 7.5rem; /* 120 */ --space-12: 10rem; /* 160 */ /* Fluid section padding (vertical rhythm for .section) */ --section-pad: clamp(3.5rem, 2.4rem + 4.6vw, 6.5rem); /* 56 → 104 */ --section-pad-tight: clamp(3.5rem, 2.6rem + 3.8vw, 6rem); /* 56 → 96 */ /* ====================================================================== */ /* LAYOUT */ /* ====================================================================== */ --container: 1320px; --container-wide: 1480px; --container-narrow: 760px; /* long-form reading measure */ --gutter: clamp(1rem, 0.5rem + 2vw, 2.75rem); /* 16 → 44 */ /* Header */ --header-h: 72px; --header-h-mobile: 60px; /* ====================================================================== */ /* RADII — minimal editorial design is near-sharp. */ /* ====================================================================== */ --radius-0: 0; --radius-xs: 2px; /* cards / tiles maximum */ --radius-sm: 4px; --radius-pill: 999px; /* reserved for small tags / pills only */ /* ====================================================================== */ /* BORDERS */ /* ====================================================================== */ --border-hairline: 1px solid var(--line); --border-brass: 1px solid var(--line-brass); /* ink accent rule */ /* ====================================================================== */ /* SHADOWS — neutral, used sparingly. Minimal design leans on rules, not */ /* drop-shadows. */ /* ====================================================================== */ --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.05), 0 8px 24px rgba(0, 0, 0, 0.07); --shadow-luxe: 0 18px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.07); --shadow-lift: 0 24px 48px rgba(0, 0, 0, 0.16); /* ====================================================================== */ /* MOTION — slow, confident, "expensive". */ /* ====================================================================== */ --ease: cubic-bezier(0.16, 1, 0.3, 1); /* signature curve */ --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --dur-fast: 300ms; --dur-base: 600ms; --dur-slow: 800ms; --dur-slower: 900ms; --dur-reveal: 700ms; --stagger-step: 90ms; /* delay between staggered children */ /* ---- z-index scale ---------------------------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 100; --z-header: 900; --z-overlay: 1000; --z-modal: 1100; } /* ========================================================================== DARK THEME OVERRIDE Any element/section can opt into the near-black world by setting data-theme="dark". Semantic tokens cascade automatically into children, so components need no dark-specific classes. The accent flips to WHITE. ========================================================================== */ [data-theme="dark"] { --bg: #0E0E0E; --bg-alt: #161616; --surface: #161616; --surface-2: #1F1F1F; --text: var(--text-on-dark); --text-muted: var(--text-on-dark-soft); --text-faint: var(--text-on-dark-faint); --line: rgba(255, 255, 255, 0.14); --line-strong: rgba(255, 255, 255, 0.26); --line-brass: rgba(255, 255, 255, 0.85); /* accent rule flips white */ --accent: #FFFFFF; --accent-strong: #FFFFFF; --accent-deep: #E0E0E0; --on-accent: #0E0E0E; --tag-bg: #FFFFFF; --tag-text: #0E0E0E; --focus-ring: #FFFFFF; /* flip raw accent tokens too, in case a component referenced them directly */ --brass: #FFFFFF; --brass-hi: #FFFFFF; --oxblood: #FFFFFF; color-scheme: dark; } /* A secondary dark variant (kept for any section that opted into it). */ [data-theme="oxblood"] { --bg: #121212; --bg-alt: #181818; --surface: #1A1A1A; --surface-2: #222222; --text: var(--text-on-dark); --text-muted: rgba(244, 244, 244, 0.70); --text-faint: rgba(244, 244, 244, 0.46); --line: rgba(255, 255, 255, 0.16); --line-strong: rgba(255, 255, 255, 0.28); --line-brass: rgba(255, 255, 255, 0.85); --accent: #FFFFFF; --accent-strong: #FFFFFF; --on-accent: #121212; --tag-bg: #FFFFFF; --tag-text: #121212; --brass: #FFFFFF; --brass-hi: #FFFFFF; --oxblood: #FFFFFF; color-scheme: dark; }