/* ========================================================================== BAKKAR PRINTING — THEME "INDUSTRIAL PRECISION" tokens.css — the design system, expressed as CSS custom properties. -------------------------------------------------------------------------- OWNER: core UI agent. Page agents must NOT edit this file. DESIGN LAW OF THIS THEME · GEOMETRY IS SHARP. border-radius is 0. Everywhere. No exceptions. · Rules are 1px HAIRLINES. Depth comes from lines, not from soft shadows. · Bakkar red is SURGICAL: rules, indices, active states, one CTA. Never a large decorative fill. · Motion is MECHANICAL: 140–220ms, cubic-bezier(0.2, 0, 0, 1). No spring. · Type: condensed grotesk display + IBM Plex Sans + IBM Plex MONO for every technical label, spec value and section index (01 / 02 / 03). ========================================================================== THE TWO MODES — ========================================================================== DARK (the theme's native character) graphite/steel canvas #0C0D0F … #16181C with a faint white blueprint grid. This IS Industrial Precision. LIGHT (a PAPER SPEC-SHEET) the same drawing, PRINTED. A bone (#F2F1EC) paper ground, the blueprint grid becomes a faint grey DRAFTING grid, the hairlines invert to dark-on-light, the type stays condensed + mono, corners stay 0, the red stays surgical. It is a technical drawing on paper — NOT a soft white commerce theme. The mode is stamped on BEFORE FIRST PAINT by the inline boot script in (see _partials.html). app.js re-applies the identical logic. Every surface, line, text colour, shadow and overlay in the theme resolves through a token below — so a stylesheet that only uses tokens is correct in BOTH modes. ========================================================================== THE THREE REDS (read this before you type a red anywhere) ========================================================================== The logo red is #ED1C24. White on it measures 4.39:1 — it FAILS AA for small text. So the red is split BY JOB, not by taste: --accent-brand #ED1C24 THE logo red. Big shapes, rules, glows, large display type, decorative slabs. NEVER small text. --accent legible Small red text, mono labels, icons, links, hairline rules. #B81217 on paper (4.9:1 even on the deepest band), #FF2A32 on graphite (5.2:1). NEVER a surface under white text — white on the graphite value is only 3.73:1. --accent-solid #D31219 A red SURFACE that carries WHITE text (5.4:1). The primary button; the "Bakkar Red" chrome; every red fill, chip, plate, pin and hover-wipe. ========================================================================== */ /* ========================================================================== 1. PRIMITIVES — the raw ramps. Never reference these in a component; reference the SEMANTIC tokens in §3 instead. ========================================================================== */ :root { color-scheme: light; /* ---- 1.1 Graphite / steel neutral ramp (the DARK canvas) -------------- */ --ink-1000: #050607; /* void — deepest backdrop */ --ink-950: #08090B; /* deepest surface */ --ink-900: #0C0D0F; /* PAGE BACKGROUND (dark) */ --ink-850: #101216; /* raised surface */ --ink-800: #16181C; /* card / panel */ --ink-750: #1B1E23; /* card hover / inset */ --ink-700: #23262C; /* strong hairline, inputs */ --ink-600: #2E323A; /* divider on dark */ --ink-500: #3C424B; /* disabled edge */ --steel-500: #6B7280; /* MID steel — the theme's true middle grey */ --steel-400: #868D98; --steel-300: #A3A9B4; /* muted text on dark (9.1:1 on --ink-900) */ --steel-200: #C6CAD1; --steel-100: #E2E4E8; /* ---- 1.2 Bone / paper ramp (the LIGHT canvas: the printed sheet) ------ */ /* Warm, uncoated, slightly toothy. A drafting sheet, not a UI white. */ --bone-000: #FFFFFF; /* the white sheet */ --bone-050: #FAF9F6; --bone-100: #F2F1EC; /* PAGE BACKGROUND (light) — bone paper */ --bone-200: #E8E6DF; /* toned band */ --bone-250: #DFDCD3; /* deep band / drafting board */ --bone-300: #CFCCC3; /* THE light hairline */ --bone-400: #B4B0A6; /* strong hairline */ --bone-500: #8D8A80; /* contrast rule */ /* Kept because the DARK mode's foreground is literally "paper on ink". */ --paper-000: #FFFFFF; --paper-050: #FAFAF9; --paper-100: #F4F4F2; --paper-200: #E9E9E6; --paper-300: #D8D8D4; --paper-400: #BFBFBA; /* ---- 1.3 Bakkar red — the ONLY chromatic colour in the system --------- */ --red-800: #6E0B10; --red-700: #8E0F14; /* deep red type ON white (9.4:1) */ --red-600: #B81217; /* legible red text on PAPER — on EVERY paper band: */ /* bone-000 6.7:1 · bone-100 5.9:1 · bone-200 5.4:1 */ /* · bone-250 4.9:1. It is tuned to the DEEPEST band */ /* (zone--void / --bg-deep), not just the page bg — */ /* the old #C6151C was only 4.34:1 on bone-250 and */ /* failed AA for the 01/02/03 indices and .ticker__n */ /* wherever a section sat on a toned band. */ --red-plate:#D31219; /* red SURFACE that carries WHITE text (5.4:1) */ --red-500: #ED1C24; /* ◀ THE BRAND. The logo colour. Large shapes only. */ --red-lit: #FF2A32; /* legible red text on GRAPHITE (5.2:1) */ --red-400: #FF3B42; --red-300: #FF6E73; --red-tint-dark: rgba(237, 28, 36, 0.12); --red-tint-light: rgba(237, 28, 36, 0.08); --red-glow: rgba(237, 28, 36, 0.40); /* ---- 1.4 Signal colours (validation only — kept desaturated) ---------- */ --ok-500: #1F7D52; /* AA on paper */ --ok-400: #35B27C; /* AA on graphite */ --ok-tint: rgba(46, 158, 107, 0.14); --warn-500: #8A6008; --warn-400: #D9A02B; --warn-tint:rgba(201, 138, 22, 0.14); --err-500: #C6151C; /* error IS the brand red. It is the alarm. */ --err-400: #FF3B42; --err-tint: rgba(237, 28, 36, 0.12); /* ---- 1.5 Alpha helpers (scrims, grids, glass) ------------------------- */ --alpha-w-02: rgba(255, 255, 255, 0.02); --alpha-w-04: rgba(255, 255, 255, 0.04); --alpha-w-06: rgba(255, 255, 255, 0.06); --alpha-w-10: rgba(255, 255, 255, 0.10); --alpha-w-16: rgba(255, 255, 255, 0.16); --alpha-k-04: rgba(8, 9, 11, 0.04); --alpha-k-08: rgba(8, 9, 11, 0.08); --alpha-k-14: rgba(8, 9, 11, 0.14); --alpha-k-60: rgba(8, 9, 11, 0.60); --alpha-k-80: rgba(8, 9, 11, 0.80); /* ======================================================================== 2. TYPOGRAPHY (direction-independent; RTL swaps the stacks in §9) ====================================================================== */ --font-display: 'Barlow Condensed', 'Archivo', 'Arial Narrow', 'Helvetica Neue', system-ui, sans-serif; --font-body: 'IBM Plex Sans', 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; /* THE ARABIC FACE. The default is Sultan Nahia — the face the real bakkar-printing.com sets its Arabic in (self-hosted, §2b). The customiser's "Arabic font" picker re-points THIS ONE TOKEN via (§2c); the Latin stacks above are the theme's identity and never move. */ --font-arabic: 'Sultan Nahia', 'Cairo', 'Segoe UI', Tahoma, sans-serif; /* The same choice with NO generic at the end — it is spliced into the MIDDLE of the RTL mono stack (§9), where a `sans-serif`/`serif` would swallow every entry behind it and make `ui-monospace` unreachable. */ --font-arabic-face: 'Sultan Nahia', 'Cairo'; /* Fluid type scale (360px → 1920px) */ --fs-2xs: clamp(0.625rem, 0.605rem + 0.09vw, 0.6875rem); /* 10 → 11 */ --fs-xs: clamp(0.6875rem, 0.665rem + 0.10vw, 0.75rem); /* 11 → 12 */ --fs-sm: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem); /* 13 → 14 */ --fs-base: clamp(0.9375rem, 0.915rem + 0.11vw, 1rem); /* 15 → 16 */ --fs-md: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); /* 16 → 18 */ --fs-lg: clamp(1.125rem, 1.05rem + 0.34vw, 1.375rem); /* 18 → 22 */ --fs-xl: clamp(1.375rem, 1.22rem + 0.70vw, 1.875rem); /* 22 → 30 */ --fs-2xl: clamp(1.75rem, 1.42rem + 1.48vw, 2.75rem); /* 28 → 44 */ --fs-3xl: clamp(2.25rem, 1.66rem + 2.65vw, 4rem); /* 36 → 64 */ --fs-4xl: clamp(2.75rem, 1.68rem + 4.80vw, 6rem); /* 44 → 96 */ --fs-hero: clamp(3rem, 1.60rem + 6.20vw, 7rem); /* 48 → 112 */ --fw-regular: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-black: 800; --lh-hero: 0.92; --lh-tight: 1.02; --lh-snug: 1.18; --lh-body: 1.65; --lh-loose: 1.8; /* `--track-wide` is the theme's micro-label signature. ZEROED in RTL (§9). */ --track-tight: -0.02em; --track-none: 0em; --track-wide: 0.14em; --track-wider: 0.22em; --measure: 68ch; --measure-narrow: 52ch; /* ======================================================================== 3. SEMANTIC COLOUR — LIGHT: THE PAPER SPEC-SHEET (the default cascade) Components read ONLY these. §4 re-points every one of them for dark. ====================================================================== */ --bg: var(--bone-100); /* bone paper */ --bg-deep: var(--bone-250); /* the drafting board under the sheet */ --bg-alt: var(--bone-050); --surface: var(--bone-000); /* the white sheet: cards, panels */ --surface-2: var(--bone-050); --surface-3: var(--bone-200); --surface-inset: var(--bone-200); --surface-glass: rgba(242, 241, 236, 0.86); --fg: #131519; /* 15.9:1 on --bg */ --fg-strong: #08090B; --fg-muted: #4A505A; /* 8.0:1 on --bg */ /* Calibrated against the DEEPEST paper band, not the page bg — a zone--ink / zone--void section re-points --bg but meta text keeps this token, so it has to clear AA on bone-250 too. #676C75 (the old value, and its "5.1:1" comment was wrong: it was really 4.67:1) fell to 4.23:1 on bone-200 and 3.85:1 on bone-250 — a failure on every page. bone-100 6.0:1 · bone-200 5.5:1 · bone-250 5.0:1 */ --fg-subtle: #565B64; --fg-inverse: var(--bone-100); --line: var(--bone-300); /* THE hairline. Dark-on-light. */ --line-faint: var(--alpha-k-08); --line-strong: var(--bone-400); --line-contrast: var(--bone-500); --accent: var(--red-600); /* legible red — text, icons, rules */ --accent-brand: var(--red-500); /* the logo red — big shapes only */ --accent-solid: var(--red-plate); /* red SURFACE under white text */ --accent-hover: var(--red-500); --accent-press: var(--red-700); --accent-fg: #FFFFFF; /* text ON --accent-solid */ --accent-tint: var(--red-tint-light); --ok: var(--ok-500); --warn: var(--warn-500); --err: var(--err-500); --scrim: rgba(8, 9, 11, 0.55); --scrim-heavy: rgba(8, 9, 11, 0.78); /* The blueprint grid becomes a faint DRAFTING grid printed on the sheet. */ --grid-unit: 34px; --grid-line: rgba(12, 13, 15, 0.045); --grid-line-major: rgba(12, 13, 15, 0.080); /* Form controls — the classic dark-mode failure. Everything is a token. */ --field-bg: var(--bone-000); --field-bg-hover: var(--bone-050); --field-border: var(--bone-300); --field-fg: var(--fg); --field-ph: #757A82; /* 4.6:1 on white */ --field-disabled: var(--bone-200); /* Media beds (product / category thumbs) — never a pastel hole. */ --media-bed: var(--bone-200); /* Inverted chip — "the opposite of the page". Solid ink on paper; solid paper on ink. Use it instead of hard-coding #000 / #fff, which becomes a hole in the other mode. */ --invert-bg: var(--ink-900); --invert-fg: var(--paper-000); /* ======================================================================== 5. GEOMETRY, SPACE, BORDER ====================================================================== */ /* ---- 5.1 RADII — the whole point of this theme. Do not change. -------- */ --radius: 0; --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --radius-pill: 0; /* ---- 5.2 Borders ----------------------------------------------------- */ --bw-hair: 1px; /* the default. A hairline rule. */ --bw-rule: 2px; /* a deliberate, heavier rule (accent underlines) */ --bw-slab: 4px; /* the red slab that flags an active/important edge */ --border: var(--bw-hair) solid var(--line); --border-faint: var(--bw-hair) solid var(--line-faint); --border-strong: var(--bw-hair) solid var(--line-strong); --border-accent: var(--bw-hair) solid var(--accent); /* ---- 5.3 Spacing scale (4px base) ------------------------------------ */ --s-0: 0; --s-1: 0.25rem; /* 4 */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.25rem; /* 20 */ --s-6: 1.5rem; /* 24 */ --s-7: 2rem; /* 32 */ --s-8: 2.5rem; /* 40 */ --s-9: 3rem; /* 48 */ --s-10: 4rem; /* 64 */ --s-11: 5rem; /* 80 */ --s-12: 6rem; /* 96 */ --s-13: 8rem; /* 128 */ /* ---- 5.4 Rhythm ------------------------------------------------------ */ --section-y: clamp(3.5rem, 2.2rem + 5.4vw, 7.5rem); --section-y-tight:clamp(2.5rem, 1.8rem + 3.0vw, 4.5rem); --stack: var(--s-6); /* ---- 5.5 Containers -------------------------------------------------- */ --container: 84rem; /* 1344px — the default page container */ --container-wide: 96rem; /* 1536px — the chrome + full-bleed grids */ --container-narrow: 52rem; /* 832px — prose / forms */ --gutter: clamp(1.125rem, 0.7rem + 2.1vw, 2.75rem); /* ---- 5.6 Fixed chrome heights (JS + CSS both read these) -------------- */ --topbar-h: 34px; --masthead-h: 78px; --masthead-h-sm: 62px; /* condensed (scrolled) state */ --header-h: calc(var(--topbar-h) + var(--masthead-h)); /* ======================================================================== 6. ELEVATION Industrial UI earns depth from HAIRLINES, not from soft shadows. These are intentionally restrained — and they flip with the mode. ====================================================================== */ --shadow-0: none; --shadow-1: 0 1px 0 var(--alpha-k-04); --shadow-2: 0 10px 28px -18px var(--alpha-k-14); --shadow-3: 0 28px 64px -30px rgba(8, 9, 11, 0.18); --shadow-4: 0 40px 96px -40px rgba(8, 9, 11, 0.22); --shadow-accent: 0 12px 32px -16px rgba(211, 18, 25, 0.32); --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.9); /* ======================================================================== 7. MOTION — mechanical. Short. Linear-ish out-curve. Never springy. ====================================================================== */ --dur-instant: 90ms; --dur-1: 140ms; /* micro: hover, focus, colour */ --dur-2: 180ms; /* default: most transitions */ --dur-3: 220ms; /* panels, dropdowns */ --dur-4: 320ms; /* drawer, modal */ --dur-5: 520ms; /* slide change, scroll reveal */ --dur-marquee: 46s; --ease: cubic-bezier(0.2, 0, 0, 1); /* THE theme curve */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-lin: linear; --t-color: color var(--dur-1) var(--ease), background-color var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); --t-move: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); /* ======================================================================== 8. Z-INDEX LADDER — one place, no magic numbers anywhere else. ====================================================================== */ --z-under: -1; --z-base: 0; --z-raised: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; /* mega-menu */ --z-drawer: 400; --z-modal: 500; /* modal, search dialog, customiser */ --z-lightbox: 550; --z-toast: 600; --z-skip: 700; /* skip-link must beat everything */ /* ======================================================================== 9. FOCUS ====================================================================== */ --focus-w: 2px; --focus-color: var(--accent); --focus-offset: 2px; --focus-ring: 0 0 0 var(--focus-w) var(--focus-color); /* ======================================================================== 10. CHROME — the topbar, the masthead and the mobile drawer. ------------------------------------------------------------------------ EVERYTHING the header and the drawer paint themselves with resolves through these. The customiser's "Bakkar Red" options simply RE-POINT them (§12), so no component downstream has to know a red command bar exists. Page agents: do NOT use these outside the chrome. ====================================================================== */ --hdr-bg: var(--surface-glass); --hdr-bg-solid: var(--bone-100); --hdr-topbar-bg: var(--bone-200); --hdr-line: var(--line); --hdr-line-faint: var(--alpha-k-08); --hdr-fg: var(--fg-strong); /* brand wordmark, active nav */ --hdr-fg-2: var(--fg-muted); /* nav links at rest */ --hdr-fg-3: var(--fg-subtle); /* topbar meta, brand tagline */ --hdr-hover-bg: var(--alpha-k-04); --hdr-accent: var(--accent); /* the sliding red underscore */ --hdr-btn-bg: transparent; --hdr-btn-line: var(--line); --hdr-btn-fg: var(--fg-muted); --hdr-btn-bg-on: var(--accent-solid); /* icon-button hover */ --hdr-btn-fg-on: var(--accent-fg); --hdr-seg-bg: var(--surface); --hdr-seg-line: var(--line); --hdr-seg-fg: var(--fg-subtle); --hdr-seg-fg-on: var(--accent-fg); --hdr-seg-thumb: var(--accent-solid); /* the language thumb: a red slab */ --hdr-cta-bg: var(--accent-solid); --hdr-cta-fg: var(--accent-fg); --hdr-cta-line: var(--accent-solid); --hdr-cta-wipe: var(--ink-1000); /* the primary button's wipe */ --hdr-mark-bg: var(--surface); --hdr-focus: var(--accent); --hdr-shadow: var(--shadow-2); --dw-bg: var(--bone-100); --dw-bg-2: var(--bone-200); /* head + foot slabs */ --dw-line: var(--line); --dw-line-faint: var(--alpha-k-08); --dw-fg: var(--fg-strong); --dw-fg-2: var(--fg-muted); --dw-fg-3: var(--fg-subtle); --dw-hover-bg: var(--alpha-k-04); --dw-accent: var(--accent); --dw-btn-line: var(--line); --dw-btn-fg: var(--fg-muted); --dw-seg-bg: var(--surface); --dw-seg-line: var(--line); --dw-seg-fg: var(--fg-subtle); --dw-seg-fg-on: var(--accent-fg); --dw-seg-thumb: var(--accent-solid); --dw-cta-bg: var(--accent-solid); --dw-cta-fg: var(--accent-fg); --dw-cta-wipe: var(--ink-1000); --dw-sub-bg: var(--bone-200); --dw-focus: var(--accent); /* ---- 10b. FOOTER — the drawing's title block. Follows the mode. ------- */ --ftr-bg: var(--bone-200); --ftr-bg-2: var(--bone-250); --ftr-line: var(--bone-300); --ftr-line-faint: var(--alpha-k-08); --ftr-fg: var(--fg-strong); --ftr-fg-2: var(--fg-muted); --ftr-fg-3: var(--fg-subtle); --ftr-accent: var(--accent); --ftr-grid: rgba(12, 13, 15, 0.040); --ftr-grid-major: rgba(12, 13, 15, 0.070); } /* ========================================================================== 2b. SULTAN NAHIA — the house Arabic face, self-hosted. -------------------------------------------------------------------------- The real bakkar-printing.com sets its Arabic in Sultan Nahia; the file ships with the theme so it also resolves from file://. Exactly ONE weight exists, so the range is declared 400–700 and the browser synthesises the bold — the alternative (a missing 700) would silently drop back to the next stack entry on every bold Arabic heading. ========================================================================== */ @font-face { font-family: 'Sultan Nahia'; src: url('../fonts/SultanNahia.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ========================================================================== 2c. THE ARABIC FONT PICKER — -------------------------------------------------------------------------- Eleven faces. Each block re-points ONE token: --font-arabic. Nothing else in the system moves — the Latin display/body/mono stacks are the theme and stay put; §9 is what routes --font-arabic into the RTL cascade, so the choice can only ever reach Arabic text. No attribute (or data-font="sultan") = Sultan Nahia, the default. The Google families are NOT linked in : app.js injects each stylesheet on demand, once, so a visitor who never opens the customiser pays nothing. ========================================================================== */ :root[data-font="sultan"] { --font-arabic: 'Sultan Nahia', 'Cairo', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Sultan Nahia', 'Cairo'; } :root[data-font="cairo"] { --font-arabic: 'Cairo', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Cairo'; } :root[data-font="tajawal"] { --font-arabic: 'Tajawal', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Tajawal'; } :root[data-font="almarai"] { --font-arabic: 'Almarai', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Almarai'; } :root[data-font="plexar"] { --font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'IBM Plex Sans Arabic'; } :root[data-font="notosans"] { --font-arabic: 'Noto Sans Arabic', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Noto Sans Arabic'; } :root[data-font="notokufi"] { --font-arabic: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Noto Kufi Arabic'; } :root[data-font="vazirmatn"] { --font-arabic: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Vazirmatn'; } :root[data-font="changa"] { --font-arabic: 'Changa', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'Changa'; } :root[data-font="elmessiri"] { --font-arabic: 'El Messiri', 'Segoe UI', Tahoma, sans-serif; --font-arabic-face: 'El Messiri'; } /* The one serif in the set — a naskh book face. */ :root[data-font="amiri"] { --font-arabic: 'Amiri', 'Segoe UI', Tahoma, serif; --font-arabic-face: 'Amiri'; } /* ========================================================================== 4. SEMANTIC COLOUR — DARK: THE GRAPHITE CANVAS -------------------------------------------------------------------------- This is the theme's native mode. The block is mirrored VERBATIM inside the prefers-color-scheme fallback at the bottom of this file (for the no-JS case). IF YOU CHANGE ONE, CHANGE BOTH. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; --bg: var(--ink-900); --bg-deep: var(--ink-1000); --bg-alt: var(--ink-950); --surface: var(--ink-800); --surface-2: var(--ink-850); --surface-3: var(--ink-750); --surface-inset: var(--ink-950); --surface-glass: rgba(12, 13, 15, 0.82); --fg: var(--paper-100); /* 15.9:1 on --ink-900 */ --fg-strong: var(--paper-000); --fg-muted: var(--steel-300); /* 9.1:1 on --ink-900 */ --fg-subtle: var(--steel-400); /* 6.6:1 on --ink-900 — meta only */ --fg-inverse: var(--ink-900); --line: var(--ink-700); --line-faint: var(--alpha-w-06); --line-strong: var(--ink-600); --line-contrast: var(--steel-500); /* On graphite the red must come UP the scale to stay legible: #ED1C24 is only 4.4:1 on #0C0D0F, so small red text switches to the lit red. */ --accent: var(--red-lit); /* 5.2:1 on --ink-900 */ --accent-brand: var(--red-500); --accent-solid: var(--red-plate); --accent-hover: var(--red-300); --accent-press: var(--red-600); --accent-fg: #FFFFFF; --accent-tint: var(--red-tint-dark); --ok: var(--ok-400); --warn: var(--warn-400); --err: var(--err-400); --scrim: var(--alpha-k-60); --scrim-heavy: var(--alpha-k-80); --grid-line: rgba(255, 255, 255, 0.030); --grid-line-major: rgba(255, 255, 255, 0.055); --field-bg: var(--ink-950); --field-bg-hover: var(--ink-850); --field-border: var(--ink-700); --field-fg: var(--fg); --field-ph: var(--steel-500); --field-disabled: var(--ink-850); --media-bed: var(--ink-850); --invert-bg: var(--paper-000); --invert-fg: var(--ink-900); /* Depth in the dark is a black pool + a lit rim, never a grey blur. */ --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.40); --shadow-2: 0 10px 28px -16px rgba(0, 0, 0, 0.80); --shadow-3: 0 28px 64px -28px rgba(0, 0, 0, 0.90); --shadow-4: 0 40px 96px -40px rgba(0, 0, 0, 0.95); --shadow-accent: 0 12px 32px -16px var(--red-glow); --shadow-inset: inset 0 1px 0 var(--alpha-w-04); /* ---- chrome ---- */ --hdr-bg: var(--surface-glass); --hdr-bg-solid: var(--ink-900); --hdr-topbar-bg: var(--ink-1000); --hdr-line: var(--ink-700); --hdr-line-faint: var(--alpha-w-06); --hdr-fg: var(--paper-000); --hdr-fg-2: var(--steel-300); --hdr-fg-3: var(--steel-400); --hdr-hover-bg: var(--alpha-w-04); --hdr-accent: var(--accent); --hdr-btn-bg: transparent; --hdr-btn-line: var(--ink-700); --hdr-btn-fg: var(--steel-300); --hdr-btn-bg-on: var(--accent-solid); --hdr-btn-fg-on: var(--accent-fg); --hdr-seg-bg: var(--ink-950); --hdr-seg-line: var(--ink-700); --hdr-seg-fg: var(--steel-400); --hdr-seg-fg-on: var(--accent-fg); --hdr-seg-thumb: var(--accent-solid); --hdr-cta-bg: var(--accent-solid); --hdr-cta-fg: var(--accent-fg); --hdr-cta-line: var(--accent-solid); --hdr-cta-wipe: var(--ink-1000); --hdr-mark-bg: var(--ink-1000); --hdr-focus: var(--accent); --hdr-shadow: var(--shadow-2); --dw-bg: var(--ink-900); --dw-bg-2: var(--ink-1000); --dw-line: var(--ink-700); --dw-line-faint: var(--alpha-w-06); --dw-fg: var(--paper-000); --dw-fg-2: var(--steel-300); --dw-fg-3: var(--steel-400); --dw-hover-bg: var(--alpha-w-04); --dw-accent: var(--accent); --dw-btn-line: var(--ink-700); --dw-btn-fg: var(--steel-300); --dw-seg-bg: var(--ink-950); --dw-seg-line: var(--ink-700); --dw-seg-fg: var(--steel-400); --dw-seg-fg-on: var(--accent-fg); --dw-seg-thumb: var(--accent-solid); --dw-cta-bg: var(--accent-solid); --dw-cta-fg: var(--accent-fg); --dw-cta-wipe: var(--ink-1000); --dw-sub-bg: var(--ink-1000); --dw-focus: var(--accent); --ftr-bg: var(--ink-1000); --ftr-bg-2: #000000; --ftr-line: var(--ink-700); --ftr-line-faint: var(--alpha-w-06); --ftr-fg: var(--paper-000); --ftr-fg-2: var(--steel-300); --ftr-fg-3: var(--steel-400); --ftr-accent: var(--accent); --ftr-grid: rgba(255, 255, 255, 0.028); --ftr-grid-major: rgba(255, 255, 255, 0.050); } /* ========================================================================== 11. ZONES — the alternating bands a page is built from. -------------------------------------------------------------------------- `zone--paper` the clean sheet · `zone--ink` a toned band · `zone--void` the deepest band (hero / closing CTA) They are RELATIVE to the active mode: on paper they are three tones of the printed sheet, on graphite they are three depths of the dark canvas. A page built out of them is automatically right in BOTH modes. ========================================================================== */ /* ---- LIGHT ---- */ .zone--paper, [data-zone="paper"] { --bg: var(--bone-000); --bg-deep: var(--bone-100); --bg-alt: var(--bone-050); --surface: var(--bone-000); --surface-2: var(--bone-050); --surface-3: var(--bone-100); --surface-inset: var(--bone-100); --surface-glass: rgba(255, 255, 255, 0.88); --line: var(--bone-300); --line-faint: var(--alpha-k-08); --line-strong: var(--bone-400); --media-bed: var(--bone-100); color: var(--fg); background-color: var(--bg); } .zone--ink, [data-zone="ink"] { --bg: var(--bone-200); --bg-deep: var(--bone-250); --bg-alt: var(--bone-100); --surface: var(--bone-000); --surface-2: var(--bone-050); --surface-3: var(--bone-250); --surface-inset: var(--bone-250); --line: var(--bone-400); --line-faint: rgba(8, 9, 11, 0.10); --line-strong: var(--bone-500); --media-bed: var(--bone-250); --grid-line: rgba(12, 13, 15, 0.055); --grid-line-major: rgba(12, 13, 15, 0.090); color: var(--fg); background-color: var(--bg); } .zone--void, [data-zone="void"] { --bg: var(--bone-250); --bg-deep: var(--bone-300); --bg-alt: var(--bone-200); --surface: var(--bone-000); --surface-2: var(--bone-100); --surface-3: var(--bone-200); --line: var(--bone-400); --line-strong: var(--bone-500); --media-bed: var(--bone-200); --grid-line: rgba(12, 13, 15, 0.060); --grid-line-major: rgba(12, 13, 15, 0.095); color: var(--fg); background-color: var(--bg); } /* ---- DARK (specificity 0,2,0 — beats the light block above) ---- */ :root[data-theme="dark"] .zone--paper, :root[data-theme="dark"] [data-zone="paper"] { --bg: var(--ink-850); --bg-deep: var(--ink-900); --bg-alt: var(--ink-800); --surface: var(--ink-800); --surface-2: var(--ink-750); --surface-3: var(--ink-700); --surface-inset: var(--ink-950); --surface-glass: rgba(16, 18, 22, 0.86); --line: var(--ink-700); --line-faint: var(--alpha-w-06); --line-strong: var(--ink-600); --media-bed: var(--ink-900); } :root[data-theme="dark"] .zone--ink, :root[data-theme="dark"] [data-zone="ink"] { --bg: var(--ink-900); --bg-deep: var(--ink-1000); --bg-alt: var(--ink-950); --surface: var(--ink-800); --surface-2: var(--ink-850); --surface-3: var(--ink-750); --surface-inset: var(--ink-950); --line: var(--ink-700); --line-faint: var(--alpha-w-06); --line-strong: var(--ink-600); --media-bed: var(--ink-850); --grid-line: rgba(255, 255, 255, 0.030); --grid-line-major: rgba(255, 255, 255, 0.055); } :root[data-theme="dark"] .zone--void, :root[data-theme="dark"] [data-zone="void"] { --bg: var(--ink-1000); --bg-deep: #000000; --bg-alt: var(--ink-950); --surface: var(--ink-900); --surface-2: var(--ink-950); --surface-3: var(--ink-850); --line: var(--ink-700); --line-strong: var(--ink-600); --media-bed: var(--ink-900); --grid-line: rgba(255, 255, 255, 0.032); --grid-line-major: rgba(255, 255, 255, 0.058); } /* ========================================================================== 12. "BAKKAR RED" CHROME — the customiser's header / sidebar option. -------------------------------------------------------------------------- It does exactly one thing: re-point the chrome tokens at an inverted, white-on-red treatment. A RED COMMAND BAR — still sharp, still mono, still hairline. Works in light AND dark, EN AND AR, because nothing downstream knows it exists. LEGIBILITY: the plate is #D31219 (white on it = 5.4:1) and the topbar strip is #A80E14 (7.6:1). White nav labels, white mono micro-labels and white icons on them all clear AA. The focus ring goes WHITE — a red ring on red is invisible. The active language thumb inverts to a WHITE slab with #8E0F14 type (9.4:1). ========================================================================== */ :root[data-header="red"] { --hdr-bg: var(--red-plate); --hdr-bg-solid: var(--red-plate); --hdr-topbar-bg: #A80E14; --hdr-line: rgba(255, 255, 255, 0.30); --hdr-line-faint: rgba(255, 255, 255, 0.16); --hdr-fg: #FFFFFF; --hdr-fg-2: rgba(255, 255, 255, 0.92); --hdr-fg-3: rgba(255, 255, 255, 0.86); --hdr-hover-bg: rgba(0, 0, 0, 0.20); --hdr-accent: #FFFFFF; /* the underscore rule goes white */ --hdr-btn-bg: transparent; --hdr-btn-line: rgba(255, 255, 255, 0.38); --hdr-btn-fg: #FFFFFF; --hdr-btn-bg-on: #FFFFFF; --hdr-btn-fg-on: var(--red-700); --hdr-seg-bg: rgba(0, 0, 0, 0.22); --hdr-seg-line: rgba(255, 255, 255, 0.38); --hdr-seg-fg: rgba(255, 255, 255, 0.88); --hdr-seg-fg-on: var(--red-700); --hdr-seg-thumb: #FFFFFF; --hdr-cta-bg: #FFFFFF; /* a red CTA on red would vanish */ --hdr-cta-fg: var(--red-700); --hdr-cta-line: #FFFFFF; --hdr-cta-wipe: var(--red-800); --hdr-mark-bg: #FFFFFF; --hdr-focus: #FFFFFF; --hdr-shadow: 0 10px 30px -18px rgba(142, 15, 20, 0.75); } :root[data-sidebar="red"] { --dw-bg: var(--red-plate); --dw-bg-2: #A80E14; --dw-line: rgba(255, 255, 255, 0.30); --dw-line-faint: rgba(255, 255, 255, 0.16); --dw-fg: #FFFFFF; --dw-fg-2: rgba(255, 255, 255, 0.92); --dw-fg-3: rgba(255, 255, 255, 0.86); --dw-hover-bg: rgba(0, 0, 0, 0.20); --dw-accent: #FFFFFF; --dw-btn-line: rgba(255, 255, 255, 0.38); --dw-btn-fg: #FFFFFF; --dw-seg-bg: rgba(0, 0, 0, 0.22); --dw-seg-line: rgba(255, 255, 255, 0.38); --dw-seg-fg: rgba(255, 255, 255, 0.88); --dw-seg-fg-on: var(--red-700); --dw-seg-thumb: #FFFFFF; --dw-cta-bg: #FFFFFF; --dw-cta-fg: var(--red-700); --dw-cta-wipe: var(--red-800); --dw-sub-bg: rgba(0, 0, 0, 0.18); --dw-focus: #FFFFFF; } /* ========================================================================== 9. RTL / ARABIC TOKEN SWAP -------------------------------------------------------------------------- Direction itself is handled by logical properties in base/components. THIS block only swaps what a logical property cannot express: · the font stacks · tracking (Arabic must NOT be letter-spaced — it breaks the joins) · leading (an Arabic face needs more air than Barlow Condensed) · display size (no Arabic face here has a condensed cut) THIS is the only door --font-arabic walks through. Whatever the customiser's font picker (§2c) puts in that token lands here — and NOWHERE else. The Latin cascade (LTR) never reads it. ========================================================================== */ [dir="rtl"] { --font-display: var(--font-arabic); --font-body: var(--font-arabic); /* IBM Plex Mono stays FIRST so Latin digits, codes and spec values remain monospaced; the chosen Arabic face picks up the Arabic glyphs behind it. */ --font-mono: 'IBM Plex Mono', var(--font-arabic-face), ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --track-tight: 0em; --track-none: 0em; --track-wide: 0em; --track-wider: 0em; --lh-hero: 1.14; --lh-tight: 1.20; --lh-snug: 1.42; --lh-body: 1.90; --lh-loose: 2.05; --fw-bold: 700; --fw-black: 800; --fs-hero: clamp(2.25rem, 1.35rem + 4.0vw, 4.5rem); --fs-4xl: clamp(2rem, 1.40rem + 2.7vw, 3.5rem); --fs-3xl: clamp(1.75rem, 1.35rem + 1.8vw, 2.75rem); } /* ========================================================================== 13. REDUCED MOTION — collapse every duration to ~0. Components need no @media of their own: they read these tokens. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-1: 1ms; --dur-2: 1ms; --dur-3: 1ms; --dur-4: 1ms; --dur-5: 1ms; --dur-marquee: 0s; } } /* ========================================================================== 14. NO-JS DARK FALLBACK -------------------------------------------------------------------------- The boot script in stamps data-theme on before first paint, so this block only ever fires with scripting off. It is a VERBATIM copy of the :root[data-theme="dark"] block (§4) and its zone overrides (§11). IF YOU CHANGE ONE, CHANGE BOTH. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --bg: var(--ink-900); --bg-deep: var(--ink-1000); --bg-alt: var(--ink-950); --surface: var(--ink-800); --surface-2: var(--ink-850); --surface-3: var(--ink-750); --surface-inset: var(--ink-950); --surface-glass: rgba(12, 13, 15, 0.82); --fg: var(--paper-100); --fg-strong: var(--paper-000); --fg-muted: var(--steel-300); --fg-subtle: var(--steel-400); --fg-inverse: var(--ink-900); --line: var(--ink-700); --line-faint: var(--alpha-w-06); --line-strong: var(--ink-600); --line-contrast: var(--steel-500); --accent: var(--red-lit); --accent-brand: var(--red-500); --accent-solid: var(--red-plate); --accent-hover: var(--red-300); --accent-press: var(--red-600); --accent-fg: #FFFFFF; --accent-tint: var(--red-tint-dark); --ok: var(--ok-400); --warn: var(--warn-400); --err: var(--err-400); --scrim: var(--alpha-k-60); --scrim-heavy: var(--alpha-k-80); --grid-line: rgba(255, 255, 255, 0.030); --grid-line-major: rgba(255, 255, 255, 0.055); --field-bg: var(--ink-950); --field-bg-hover: var(--ink-850); --field-border: var(--ink-700); --field-fg: var(--fg); --field-ph: var(--steel-500); --field-disabled: var(--ink-850); --media-bed: var(--ink-850); --invert-bg: var(--paper-000); --invert-fg: var(--ink-900); --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.40); --shadow-2: 0 10px 28px -16px rgba(0, 0, 0, 0.80); --shadow-3: 0 28px 64px -28px rgba(0, 0, 0, 0.90); --shadow-4: 0 40px 96px -40px rgba(0, 0, 0, 0.95); --shadow-accent: 0 12px 32px -16px var(--red-glow); --shadow-inset: inset 0 1px 0 var(--alpha-w-04); --hdr-bg: var(--surface-glass); --hdr-bg-solid: var(--ink-900); --hdr-topbar-bg: var(--ink-1000); --hdr-line: var(--ink-700); --hdr-line-faint: var(--alpha-w-06); --hdr-fg: var(--paper-000); --hdr-fg-2: var(--steel-300); --hdr-fg-3: var(--steel-400); --hdr-hover-bg: var(--alpha-w-04); --hdr-accent: var(--accent); --hdr-btn-line: var(--ink-700); --hdr-btn-fg: var(--steel-300); --hdr-btn-bg-on: var(--accent-solid); --hdr-btn-fg-on: var(--accent-fg); --hdr-seg-bg: var(--ink-950); --hdr-seg-line: var(--ink-700); --hdr-seg-fg: var(--steel-400); --hdr-seg-fg-on: var(--accent-fg); --hdr-seg-thumb: var(--accent-solid); --hdr-cta-bg: var(--accent-solid); --hdr-cta-fg: var(--accent-fg); --hdr-cta-line: var(--accent-solid); --hdr-cta-wipe: var(--ink-1000); --hdr-mark-bg: var(--ink-1000); --hdr-focus: var(--accent); --hdr-shadow: var(--shadow-2); --dw-bg: var(--ink-900); --dw-bg-2: var(--ink-1000); --dw-line: var(--ink-700); --dw-line-faint: var(--alpha-w-06); --dw-fg: var(--paper-000); --dw-fg-2: var(--steel-300); --dw-fg-3: var(--steel-400); --dw-hover-bg: var(--alpha-w-04); --dw-accent: var(--accent); --dw-btn-line: var(--ink-700); --dw-btn-fg: var(--steel-300); --dw-seg-bg: var(--ink-950); --dw-seg-line: var(--ink-700); --dw-seg-fg: var(--steel-400); --dw-seg-fg-on: var(--accent-fg); --dw-seg-thumb: var(--accent-solid); --dw-cta-bg: var(--accent-solid); --dw-cta-fg: var(--accent-fg); --dw-cta-wipe: var(--ink-1000); --dw-sub-bg: var(--ink-1000); --dw-focus: var(--accent); --ftr-bg: var(--ink-1000); --ftr-bg-2: #000000; --ftr-line: var(--ink-700); --ftr-line-faint: var(--alpha-w-06); --ftr-fg: var(--paper-000); --ftr-fg-2: var(--steel-300); --ftr-fg-3: var(--steel-400); --ftr-accent: var(--accent); --ftr-grid: rgba(255, 255, 255, 0.028); --ftr-grid-major: rgba(255, 255, 255, 0.050); } :root:not([data-theme]) .zone--paper, :root:not([data-theme]) [data-zone="paper"] { --bg: var(--ink-850); --bg-deep: var(--ink-900); --bg-alt: var(--ink-800); --surface: var(--ink-800); --surface-2: var(--ink-750); --surface-3: var(--ink-700); --surface-inset: var(--ink-950); --surface-glass: rgba(16, 18, 22, 0.86); --line: var(--ink-700); --line-faint: var(--alpha-w-06); --line-strong: var(--ink-600); --media-bed: var(--ink-900); } :root:not([data-theme]) .zone--ink, :root:not([data-theme]) [data-zone="ink"] { --bg: var(--ink-900); --bg-deep: var(--ink-1000); --bg-alt: var(--ink-950); --surface: var(--ink-800); --surface-2: var(--ink-850); --surface-3: var(--ink-750); --surface-inset: var(--ink-950); --line: var(--ink-700); --line-faint: var(--alpha-w-06); --line-strong: var(--ink-600); --media-bed: var(--ink-850); --grid-line: rgba(255, 255, 255, 0.030); --grid-line-major: rgba(255, 255, 255, 0.055); } :root:not([data-theme]) .zone--void, :root:not([data-theme]) [data-zone="void"] { --bg: var(--ink-1000); --bg-deep: #000000; --bg-alt: var(--ink-950); --surface: var(--ink-900); --surface-2: var(--ink-950); --surface-3: var(--ink-850); --line: var(--ink-700); --line-strong: var(--ink-600); --media-bed: var(--ink-900); --grid-line: rgba(255, 255, 255, 0.032); --grid-line-major: rgba(255, 255, 255, 0.058); } } /* ========================================================================== 15. BREAKPOINTS — documented here, used literally in @media (a custom property cannot be read inside a media query). -------------------------------------------------------------------------- xs < 480px single column sm >= 480px 2-up cards md >= 768px 2/3-up, spec tables side-by-side lg >= 1024px ◀ THE CHROME BREAKPOINT. Below it the header is stripped to LOGO + SEARCH + BURGER and the drawer owns the nav, the language switch, the customiser and the quote CTA. xl >= 1280px 4-up grids, full language words in the header 2xl >= 1600px max container, wider gutters ========================================================================== */