/* ────────────────────────────────────────────────────────────── Bunood — Design Tokens · v2 "Bold Modern Engineering" ────────────────────────────────────────────────────────────── What changed vs v1: · Cairo → IBM Plex Sans Arabic (technical, modern, bold-capable) · Fraunces italic display → Space Grotesk (bold, boxy, geometric) · Cream/beige paper backgrounds → clean off-white (NOT beige) · Sharper radii, harder edges, more boxy · Stronger contrast across the board for WCAG AA buttons · Same brand green (#1F5145) + ochre (#C8923C) accent RTL/Arabic-first. Loaded FIRST, before every other stylesheet. ────────────────────────────────────────────────────────────── */ :root { /* ═══════════════════════════════════════════════════════════ SURFACES · clean off-white, never beige ═══════════════════════════════════════════════════════════ */ --paper: #F5F5F2; /* page background — off-white, NOT beige */ --paper-deep: #ECECE6; /* sectioned bands, hovers */ --paper-soft: #F9F9F6; /* subtler alt */ --sand: #E5E5DC; /* deeper alt, dividers */ --sand-soft: #EFEFE8; --sand-deep: #C8C8BD; /* draft rule */ --card: #FFFFFF; /* clean white card surface */ --card-deep: #FAFAF7; /* ═══════════════════════════════════════════════════════════ INK · near-black, slight green undertone ═══════════════════════════════════════════════════════════ */ --ink: #0B1F1A; /* primary text, headlines */ --ink-2: #2A3A35; /* secondary */ --ink-3: #4A5852; /* tertiary on light bg */ --stone: #5B6760; /* muted metadata — bumped contrast */ --stone-light: #8A958D; /* placeholders */ --stone-pale: #BFC5BE; /* disabled */ /* ═══════════════════════════════════════════════════════════ BRAND · forest green ═══════════════════════════════════════════════════════════ */ --brand: #1F5145; /* primary brand */ --brand-deep: #0F2A24; /* darker — banners */ --brand-darker: #08201A; --brand-ink: #14382F; --brand-soft: #2D6F5E; --brand-pale: #E5EFE9; --brand-veil: #EEF5F1; --brand-on-dark: #D6E5DE; /* better contrast than the old #C8E0D9 */ /* ═══════════════════════════════════════════════════════════ OCHRE · highlight — used like a marker ═══════════════════════════════════════════════════════════ */ --ochre: #C8923C; --ochre-deep: #8E641E; --ochre-light: #E6B560; --ochre-bright: #F0C26B; /* on-dark accent that stays readable */ --ochre-soft: #F3E2B8; --ochre-pale: #FAF1D9; /* ═══════════════════════════════════════════════════════════ ACCENT colours — used sparingly for state ═══════════════════════════════════════════════════════════ */ --rust: #B5563C; --rust-deep: #8A3F2A; --rust-soft: #F2D8CE; --plum: #6B3F5C; --plum-soft: #ECD9E2; --slate: #3D5260; --slate-soft: #DDE5EA; --teal: #2A6F6F; --teal-soft: #D5E8E8; /* ═══════════════════════════════════════════════════════════ SEMANTIC · one per state ═══════════════════════════════════════════════════════════ */ --success: #2D6F5E; --success-bg: #DCEAE3; --warn: #C8923C; --warn-bg: #F3E2B8; --danger: #B5563C; --danger-bg: #F2D8CE; --info: #3D5260; --info-bg: #DDE5EA; /* ═══════════════════════════════════════════════════════════ BORDERS · cleaner draft lines ═══════════════════════════════════════════════════════════ */ --rule: #DCDCD3; --rule-soft: #EBEBE3; --rule-strong: #B7B7AA; --rule-ink: #0B1F1A; /* ═══════════════════════════════════════════════════════════ SPACING · 4px scale ═══════════════════════════════════════════════════════════ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; --space-11: 96px; --space-12: 128px; --space-13: 160px; /* ═══════════════════════════════════════════════════════════ TYPE · IBM Plex Sans Arabic (the user's choice — don't change) + Space Grotesk (Latin display) + Geist Mono (latin tags) ═══════════════════════════════════════════════════════════ Important: --font-mono includes 'IBM Plex Sans Arabic' as fallback so Arabic text inside mono-styled elements gets proper Arabic glyphs instead of the awful system mono fallback. */ --font-sans: 'IBM Plex Sans Arabic', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: 'Space Grotesk', 'IBM Plex Sans Arabic', system-ui, sans-serif; --font-mono: 'Geist Mono', 'DM Mono', 'IBM Plex Sans Arabic', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type ramp */ --fs-xs: 11px; --fs-sm: 12.5px; --fs-base: 14.5px; --fs-md: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px; --fs-3xl: 36px; --fs-4xl: 48px; --fs-5xl: 64px; --fs-6xl: 88px; --fs-7xl: 128px; --fs-8xl: 180px; --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-extra: 800; --fw-heavy: 900; /* Tajawal supports this — true display weight */ --lh-tight: 1.05; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.7; --tracking-tightest: -0.04em; --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-normal: 0em; --tracking-wide: 0.02em; --tracking-wider: 0.08em; --tracking-stamp: 0.14em; /* ═══════════════════════════════════════════════════════════ RADII · much sharper than v1 — bold/boxy ═══════════════════════════════════════════════════════════ */ --radius-sm: 2px; --radius: 4px; /* default — sharp, deliberate */ --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-pill: 999px; /* ═══════════════════════════════════════════════════════════ SHADOWS · hard offset for the "stamp" look ═══════════════════════════════════════════════════════════ */ --shadow-stamp: -4px 4px 0 var(--ink); --shadow-stamp-brand: -4px 4px 0 var(--brand); --shadow-stamp-ochre: -4px 4px 0 var(--ochre); --shadow-stamp-sm: -2px 2px 0 var(--ink); --shadow-stamp-lg: -8px 8px 0 var(--ink); --shadow-soft: 0 2px 8px rgba(11, 31, 26, 0.05); --shadow: 0 4px 16px rgba(11, 31, 26, 0.07), 0 1px 2px rgba(11, 31, 26, 0.04); --shadow-lg: 0 12px 32px rgba(11, 31, 26, 0.1), 0 2px 4px rgba(11, 31, 26, 0.06); --shadow-xl: 0 24px 48px rgba(11, 31, 26, 0.14), 0 4px 8px rgba(11, 31, 26, 0.08); --shadow-focus: 0 0 0 3px rgba(31, 81, 69, 0.28); --shadow-focus-ochre: 0 0 0 3px rgba(200, 146, 60, 0.3); --shadow-focus-rust: 0 0 0 3px rgba(181, 86, 60, 0.28); /* ═══════════════════════════════════════════════════════════ MOTION ═══════════════════════════════════════════════════════════ */ --ease: cubic-bezier(.2, 0, .15, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --ease-bounce: cubic-bezier(.34, 1.56, .64, 1); --duration: .15s; --duration-md: .25s; --duration-lg: .4s; --duration-xl: .6s; /* ═══════════════════════════════════════════════════════════ LEGACY ALIASES — keep old stylesheets working ═══════════════════════════════════════════════════════════ */ --surface-0: var(--paper); --surface-1: var(--card); --surface-2: var(--paper-soft); --surface-3: var(--sand); --border: var(--rule); --border-soft: var(--rule-soft); --border-strong: var(--rule-strong); --muted: var(--stone); --muted-2: var(--stone-light); --brand-dark: var(--brand-deep); --brand-light: var(--brand-soft); --brand-text-on-dark: var(--brand-on-dark); --primary: var(--brand); --primary-dark: var(--brand-deep); --primary-light: var(--brand-soft); --primary-pale: var(--brand-pale); --info-bg: var(--slate-soft); --success-bg: var(--brand-pale); --warn-bg: var(--ochre-soft); --danger-bg: var(--rust-soft); --purple: var(--plum); --purple-bg: var(--plum-soft); --shadow-xs: var(--shadow-soft); --shadow-sm: var(--shadow-soft); --shadow-md: var(--shadow); --fw-black: 900; } * { accent-color: var(--brand); } /* Mono numerals wherever they're tabulated */ .num, [data-num], table td.num, table th.num, .tabular, .tabular-nums { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: 0; }