/* ========================================================================== BAKKAR PRINTING — THEME "MOMENTUM" tokens.css — the design system, expressed as CSS custom properties. -------------------------------------------------------------------------- OWNED BY: core UI agent. Page agents must NOT edit this file. DIRECTION Bright, warm, modern soft-commerce. White + warm paper + deep ink navy, and a dark mode that keeps the same warmth. The Bakkar red warmed into a red -> amber gradient for every primary action. Generously rounded geometry, soft layered elevation, springy motion. ========================================================================== THE TWO-RED SYSTEM (read this before you type a red anywhere) ========================================================================== The logo's red is #FF0010. Measured on white it is 3.99:1 — it FAILS AA for normal text (4.5:1) and only clears the 3:1 bar for large text / UI shapes. So the red is split by JOB, not by taste: --red-brand #FF0010 THE LOGO RED. Brand mark, big fills, decorative graphics, glows, large display type. NEVER small text. --red-action #D40010 5.52:1 on white. Buttons, links, small red text, icons, borders — anything that must be LEGIBLE. --red-plate #E30010 4.91:1 with WHITE on top. The "Bakkar Red" SURFACE (the red header / red sidebar). Bright enough to read as the logo red, deep enough that white nav labels on it genuinely pass AA. Semantic aliases you actually type: --brand = red-brand (decorative / large) --brand-ink = red-action (small text, links) <- default to this --brand-soft = tinted background --grad-cta = the button gradient; every stop is >= 4.5:1 with white. ========================================================================== DARK MODE ========================================================================== Driven by — set BEFORE first paint by the inline script in . Every surface / text / line / shadow / overlay in the theme resolves through a token below, so a page stylesheet that only uses tokens is automatically correct in dark. The dark block lives under :root[data-theme="dark"]. The identical block is repeated inside @media (prefers-color-scheme: dark) for :root:not([data-theme]) so a JS-disabled visitor on a dark OS still gets dark. KEEP THE TWO IN SYNC. ========================================================================== */ /* ========================================================================== SELF-HOSTED ARABIC — "Sultan Nahia", the face bakkar-printing.com wears. It is the DEFAULT Arabic font of this theme and the only one that is not a Google family, so it ships with the theme and works offline / from file://. Only ONE weight exists in the file; declaring the 400..700 range over it lets the browser synthesise the bold rather than dropping to a fallback face. ========================================================================== */ @font-face { font-family: 'Sultan Nahia'; src: url('../fonts/SultanNahia.ttf') format('truetype'); font-weight: 400 700; font-style: normal; font-display: swap; } :root { color-scheme: light; /* --------------------------------------------------------------------- 1. COLOUR RAMPS --------------------------------------------------------------------- */ /* Brand red — anchored on the exact logo colour at 500. */ --red-50: #FFF1F2; --red-100: #FFDDDF; --red-200: #FFC0C4; --red-300: #FF9298; --red-400: #FF5560; --red-500: #FF0010; /* THE Bakkar red — the logo colour, exactly */ --red-600: #E30010; /* the "Bakkar Red" surface plate — AA with white */ /* The CTA red. Measured: white text on #DE1516 = 4.97:1 → passes AA. (#FF0010 is only 3.99:1 and #ED1C24 4.38:1 — both fail, so neither can carry white button text.) This is the red the quote button wears. */ --red-cta: #DE1516; --red-700: #D40010; /* small red text / links on white — 5.52:1 */ --red-800: #A80009; --red-900: #7C0007; /* The two-red system, by job. */ --red-brand: var(--red-500); /* logo red — big shapes only */ --red-action: var(--red-700); /* legible red — text, links, buttons */ --red-plate: var(--red-600); /* red SURFACE that carries white text */ /* Amber — the warm end of the momentum gradient. */ --amber-50: #FFF7ED; --amber-100: #FFEDD5; --amber-200: #FED7AA; --amber-300: #FDBA74; --amber-400: #FB923C; --amber-500: #F97316; /* decorative amber (glows, highlights, large type) */ --amber-600: #EA580C; --amber-700: #CF4B08; /* CTA gradient end (AA-safe with white text) */ --amber-800: #9A3412; --amber-900: #7C2D12; /* Ink — a deep navy-black, warm-neutral steps down to paper. */ --ink-950: #0B0C12; --ink-900: #14161F; /* THE ink: body text, footer canvas */ --ink-800: #1E2130; --ink-700: #2B2F40; --ink-600: #3E4356; --ink-500: #5A5F6E; /* 6.36:1 on white — secondary text */ --ink-400: #6E7482; /* 4.65:1 on white — muted body text */ --ink-300: #9AA0AC; /* decorative / disabled text only */ --ink-200: #C7CBD3; --ink-150: #DDE0E6; --ink-100: #E9EBEF; --ink-50: #F3F4F6; /* Warm neutrals — the "paper" family that keeps the canvas from going cold. */ --paper-0: #FFFFFF; --paper-50: #FDFCFB; --paper-100: #FBF9F7; /* THE warm paper */ --paper-200: #F5F1ED; --paper-300: #ECE6E0; --paper-400: #DED6CE; /* Support colours (validation, toasts). */ --ok-50: #ECFDF5; --ok-500: #10B981; --ok-700: #047857; /* 4.6:1 on white */ --warn-50: #FFFBEB; --warn-500:#F59E0B; --warn-700:#B45309; --err-50: #FEF2F2; --err-500: #EF4444; --err-700: #C2181C; /* validation text — distinct enough from brand red */ --info-50: #EFF6FF; --info-500:#3B82F6; --info-700:#1D4ED8; /* --------------------------------------------------------------------- 2. SEMANTIC COLOUR --------------------------------------------------------------------- */ --brand: var(--red-brand); /* DECORATIVE / LARGE ONLY */ --brand-strong: var(--red-600); --brand-ink: var(--red-action); /* red for SMALL TEXT — AA safe */ --brand-soft: var(--red-50); --brand-soft-line: var(--red-100); --brand-soft-fg: var(--red-700); /* text colour ON --brand-soft */ --accent: var(--amber-500); --accent-strong: var(--amber-700); --accent-soft: var(--amber-50); --bg: var(--paper-0); --bg-warm: var(--paper-100); --bg-tint: var(--paper-200); --bg-ink: var(--ink-900); /* stays dark in BOTH themes */ --bg-ink-2: var(--ink-800); --surface: var(--paper-0); /* cards, panels, dialogs */ --surface-2: var(--paper-100); /* recessed / warm card */ --surface-3: var(--paper-200); /* chips, inputs, media beds */ --surface-4: var(--paper-300); /* hover of surface-3 */ --surface-ink: var(--ink-900); --text: var(--ink-900); --text-2: var(--ink-500); --text-3: var(--ink-400); --text-faint: var(--ink-300); --text-on-brand: #FFFFFF; --text-on-ink: #F7F7F8; --text-on-ink-2: #A9AEBB; --line: var(--ink-100); --line-strong: var(--ink-150); --line-warm: var(--paper-300); --line-ink: rgba(255, 255, 255, 0.10); --line-ink-strong: rgba(255, 255, 255, 0.18); --link: var(--brand-ink); --link-hover: var(--red-800); /* Neutral overlays — the ONLY way to tint something over an unknown ground. They flip in dark, so a "darken on hover" never turns into a black hole. */ --overlay-1: rgba(20, 22, 31, 0.06); --overlay-2: rgba(20, 22, 31, 0.12); --overlay-inv-1: rgba(255, 255, 255, 0.10); --overlay-inv-2: rgba(255, 255, 255, 0.20); /* INVERT — "the opposite of the page". A solid ink chip on white; a solid white chip on ink. Use it for any high-contrast slug (solid buttons, selected chips, icon-button hover) instead of hard-coding --ink-900/#fff, which becomes a black hole in dark mode. */ --invert-bg: var(--ink-900); --invert-bg-h: var(--ink-800); --invert-fg: #FFFFFF; /* NOTE — the warm advisory panel (form notes, amber badges). */ --note-bg: var(--amber-50); --note-line: rgba(249, 115, 22, .30); --note-fg: var(--amber-900); --note-icon: var(--amber-600); --focus: #1D4ED8; /* blue focus ring — never confused with the red brand */ --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus); --focus-ring-ink: 0 0 0 3px var(--ink-900), 0 0 0 5px #93B4FF; --focus-on-red: #FFFFFF; /* focus ring ON a red surface */ --selection-bg: #FFDDDF; --selection-fg: var(--ink-900); /* --------------------------------------------------------------------- 3. GRADIENTS & GLOWS — the momentum signature --------------------------------------------------------------------- */ /* Every stop >= 4.5:1 against white text. */ --grad-cta: linear-gradient(112deg, #D40010 0%, #CE2B0B 52%, #CF4B08 100%); --grad-cta-hover: linear-gradient(112deg, #C0000E 0%, #BB2709 52%, #BC4407 100%); /* Decorative — large type, glows, rules, hero washes. Not for small text. */ --grad-hot: linear-gradient(112deg, var(--red-brand) 0%, var(--amber-500) 100%); --grad-hot-soft: linear-gradient(112deg, var(--red-50) 0%, var(--amber-50) 100%); --grad-ink: linear-gradient(150deg, var(--ink-900) 0%, var(--ink-700) 100%); --grad-paper: linear-gradient(180deg, var(--paper-0) 0%, var(--paper-100) 100%); --grad-sheen: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 50%, rgba(255,255,255,0) 80%); /* THE "Bakkar Red" surface. Reads as the logo red; every stop carries white small text at >= 4.5:1 (plate #E30010 = 4.91, tail #C7000C = 5.9). */ --grad-red-surface: linear-gradient(112deg, var(--red-plate) 0%, #C7000C 100%); /* Scrim used over photography so white copy stays legible. */ --scrim: linear-gradient(90deg, rgba(11,12,18,.86) 0%, rgba(11,12,18,.66) 42%, rgba(11,12,18,.12) 78%, rgba(11,12,18,0) 100%); --scrim-b: linear-gradient(0deg, rgba(11,12,18,.80) 0%, rgba(11,12,18,.30) 45%, rgba(11,12,18,0) 100%); --glow-brand: 0 18px 40px -14px rgba(255, 0, 16, .40); --glow-brand-lg: 0 26px 60px -18px rgba(255, 0, 16, .50); --glow-amber: 0 18px 40px -14px rgba(249, 115, 22, .40); /* --------------------------------------------------------------------- 4. TYPOGRAPHY --------------------------------------------------------------------- */ --font-display: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-body: 'Plus Jakarta Sans', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif; --font-num: 'Manrope', 'Plus Jakarta Sans', 'Segoe UI', Arial, sans-serif; /* stats, counters, figures */ /* THE ARABIC FACE. Everything Arabic — display, body, the RTL numerals stack, the Arabic half of the language switch — resolves through --font-ar, and NOTHING else does. That is what lets the customiser's "Arabic font" picker re-point one token and leave the Latin typography untouched. Default = Sultan Nahia, the face bakkar-printing.com actually uses. */ --font-ar: var(--fam-cairo); /* Almarai sits in the mono stack as the Arabic-covering fallback: none of the mono faces carry Arabic, so without it any Arabic that lands in a code box (e.g. an Arabic note typed into the EN form) drops to a typewriter fallback with broken cursive joins. Per-glyph fallback keeps Latin monospaced. */ --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Almarai', monospace; /* --------------------------------------------------------------------- 4b. THE ARABIC FONT LIBRARY (customiser -> "Arabic font") Every option the picker offers, declared ONCE as a family token so the [data-font] override below and the preview swatch in the picker cannot drift apart. Sultan Nahia is self-hosted (see the @font-face above); the other ten are Google families, whose stylesheet app.js injects ON DEMAND — nothing is fetched for a font nobody picked. --------------------------------------------------------------------- */ --fam-sultan: 'Sultan Nahia', 'Almarai', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-cairo: 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-tajawal: 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-almarai: 'Almarai', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-plexar: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-notosans: 'Noto Sans Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-notokufi: 'Noto Kufi Arabic', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-vazirmatn: 'Vazirmatn', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-changa: 'Changa', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-elmessiri: 'El Messiri', 'Segoe UI', Tahoma, Arial, sans-serif; --fam-amiri: 'Amiri', 'Segoe UI', Tahoma, 'Times New Roman', serif; /* Fluid type scale — 360px .. 1440px viewport. */ --fs-2xs: clamp(0.688rem, 0.66rem + 0.12vw, 0.75rem); /* 11 -> 12 */ --fs-xs: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* 12 -> 13 */ --fs-sm: clamp(0.8125rem,0.78rem + 0.18vw, 0.875rem); /* 13 -> 14 */ --fs-base: clamp(0.9375rem,0.90rem + 0.22vw, 1rem); /* 15 -> 16 */ --fs-md: clamp(1rem, 0.96rem + 0.28vw, 1.125rem); /* 16 -> 18 */ --fs-lg: clamp(1.125rem, 1.06rem + 0.36vw, 1.3125rem); /* 18 -> 21 */ --fs-xl: clamp(1.3125rem,1.20rem + 0.60vw, 1.625rem); /* 21 -> 26 */ --fs-2xl: clamp(1.5rem, 1.32rem + 0.90vw, 2.0625rem); /* 24 -> 33 */ --fs-3xl: clamp(1.875rem, 1.58rem + 1.45vw, 2.75rem); /* 30 -> 44 */ --fs-4xl: clamp(2.25rem, 1.80rem + 2.20vw, 3.5rem); /* 36 -> 56 */ --fs-5xl: clamp(2.75rem, 2.05rem + 3.40vw, 4.5rem); /* 44 -> 72 */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-heavy: 800; --lh-tight: 1.08; --lh-snug: 1.22; --lh-heading:1.16; --lh-normal: 1.55; --lh-relaxed:1.72; --ls-tighter: -0.03em; --ls-tight: -0.018em; --ls-normal: 0; --ls-wide: 0.02em; --ls-wider: 0.08em; /* eyebrows / all-caps micro labels */ /* --------------------------------------------------------------------- 5. SPACING (4px base) --------------------------------------------------------------------- */ --sp-0: 0; --sp-1: 0.25rem; /* 4 */ --sp-2: 0.5rem; /* 8 */ --sp-3: 0.75rem; /* 12 */ --sp-4: 1rem; /* 16 */ --sp-5: 1.25rem; /* 20 */ --sp-6: 1.5rem; /* 24 */ --sp-7: 1.75rem; /* 28 */ --sp-8: 2rem; /* 32 */ --sp-10: 2.5rem; /* 40 */ --sp-12: 3rem; /* 48 */ --sp-14: 3.5rem; /* 56 */ --sp-16: 4rem; /* 64 */ --sp-20: 5rem; /* 80 */ --sp-24: 6rem; /* 96 */ --sp-32: 8rem; /* 128 */ /* Fluid section rhythm. */ --sp-section: clamp(3.5rem, 2.2rem + 5.2vw, 7rem); --sp-section-s: clamp(2.25rem, 1.6rem + 2.6vw, 4rem); --gutter: clamp(1rem, 0.6rem + 1.8vw, 2rem); --grid-gap: clamp(0.875rem, 0.55rem + 1.3vw, 1.5rem); /* --------------------------------------------------------------------- 6. RADII — generously rounded is the whole point --------------------------------------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; /* the default card radius */ --r-xl: 24px; /* large cards, bento tiles */ --r-2xl: 32px; /* hero tiles, big bands */ --r-3xl: 40px; --r-pill: 999px; /* nav, chips, filters, buttons */ --r-circle: 50%; /* --------------------------------------------------------------------- 7. BORDERS --------------------------------------------------------------------- */ --bw-hair: 1px; --bw-1: 1px; --bw-2: 2px; --bw-3: 3px; --border: var(--bw-1) solid var(--line); --border-strong: var(--bw-1) solid var(--line-strong); --border-warm: var(--bw-1) solid var(--line-warm); --border-brand: var(--bw-1) solid var(--brand-soft-line); --border-ink: var(--bw-1) solid var(--line-ink); /* --------------------------------------------------------------------- 8. ELEVATION — always multi-stop, never a single harsh drop --------------------------------------------------------------------- */ --sh-0: none; --sh-1: 0 1px 2px rgba(20, 22, 31, .04), 0 2px 6px -1px rgba(20, 22, 31, .05); --sh-2: 0 1px 2px rgba(20, 22, 31, .04), 0 4px 10px -2px rgba(20, 22, 31, .06), 0 10px 22px -8px rgba(20, 22, 31, .07); --sh-3: 0 1px 2px rgba(20, 22, 31, .04), 0 6px 14px -4px rgba(20, 22, 31, .07), 0 18px 36px -12px rgba(20, 22, 31, .10); --sh-4: 0 2px 4px rgba(20, 22, 31, .04), 0 10px 22px -6px rgba(20, 22, 31, .08), 0 28px 56px -18px rgba(20, 22, 31, .14); --sh-5: 0 4px 8px rgba(20, 22, 31, .05), 0 16px 34px -8px rgba(20, 22, 31, .10), 0 44px 80px -24px rgba(20, 22, 31, .20); /* Inset hairline that keeps a light card from dissolving into white — and, in dark, the soft glowing rim that replaces the drop shadow entirely. */ --sh-ring: inset 0 0 0 1px rgba(20, 22, 31, .06); --sh-ring-warm: inset 0 0 0 1px rgba(120, 95, 75, .08); --sh-header: 0 1px 0 rgba(20, 22, 31, .06), 0 10px 30px -14px rgba(20, 22, 31, .18); /* --------------------------------------------------------------------- 9. GLASS — the sticky header, drawers, overlays --------------------------------------------------------------------- */ --glass-bg: rgba(255, 255, 255, .72); --glass-bg-solid:rgba(255, 255, 255, .94); --glass-blur: saturate(180%) blur(18px); --glass-line: rgba(20, 22, 31, .07); --backdrop: rgba(11, 12, 18, .55); --backdrop-blur: blur(6px); /* --------------------------------------------------------------------- 9b. CHROME — the header + the mobile drawer. Everything the header and the drawer paint themselves with resolves through these. The "Bakkar Red" options in the theme customiser simply re-point them (see section 9c), so no component has to know a red header exists. Page agents: do NOT use these outside the chrome. --------------------------------------------------------------------- */ --hdr-bg: var(--glass-bg); --hdr-bg-solid: var(--glass-bg-solid); --hdr-line: transparent; --hdr-line-lit: var(--glass-line); /* once the page is scrolled */ --hdr-sh: var(--sh-header); --hdr-fg: var(--ink-900); /* brand wordmark, active nav */ --hdr-fg-2: var(--ink-700); /* nav links at rest */ --hdr-fg-3: var(--text-3); /* brand tagline */ --hdr-hover-bg: var(--surface-3); /* nav pill hover */ --hdr-hover-fg: var(--ink-900); --hdr-active-bg: var(--brand-soft); /* the current page pill */ --hdr-active-fg: var(--brand-ink); --hdr-btn-bg: var(--surface-3); /* search / customiser icon button */ --hdr-btn-fg: var(--ink-700); --hdr-btn-bg-h: var(--ink-900); --hdr-btn-fg-h: #fff; --hdr-seg-bg: var(--surface-3); /* language segmented control */ --hdr-seg-line: var(--line); --hdr-seg-fg: var(--text-3); --hdr-seg-fg-on: var(--ink-900); --hdr-seg-thumb: var(--surface); /* Solid red on the default (white) header — not the gradient. It inverts to a white plate with red text when the header is Bakkar Red (see [data-header="red"]). */ --hdr-cta-bg: var(--red-cta); --hdr-cta-fg: var(--text-on-brand); --hdr-cta-sh: var(--glow-brand), var(--sh-2); --hdr-burger-bg: var(--ink-900); --hdr-burger-fg: #fff; --hdr-focus: var(--focus); --hdr-mark-plate: transparent; /* white chip behind the logo, only on red */ --hdr-mark-ring: 0 0 0 0 transparent; /* Drawer — same vocabulary, its own switch. */ --dw-bg: var(--surface); --dw-bg-2: var(--surface-2); /* the sticky foot */ --dw-line: var(--line); --dw-fg: var(--ink-800); --dw-fg-2: var(--ink-500); --dw-fg-3: var(--text-faint); --dw-hover-bg: var(--brand-soft); --dw-hover-fg: var(--brand-ink); --dw-active-bg: var(--brand-soft); --dw-active-fg: var(--brand-ink); --dw-sub-bg: var(--surface-3); --dw-btn-bg: var(--surface-3); --dw-btn-fg: var(--ink-700); --dw-icon: var(--brand-ink); --dw-seg-bg: var(--surface-3); --dw-seg-line: var(--line); --dw-seg-fg: var(--text-3); --dw-seg-fg-on: var(--ink-900); --dw-seg-thumb: var(--surface); --dw-cta-bg: var(--grad-cta); --dw-cta-fg: var(--text-on-brand); --dw-cta-sh: var(--glow-brand), var(--sh-2); --dw-focus: var(--focus); --dw-mark-plate: transparent; /* --------------------------------------------------------------------- 10. Z-INDEX LADDER --------------------------------------------------------------------- */ --z-below: -1; --z-base: 0; --z-raised: 1; --z-sticky: 100; /* in-page sticky bars (filters, gallery rail) */ --z-header: 200; --z-mega: 210; --z-fab: 300; --z-drawer: 400; --z-backdrop: 450; --z-modal: 500; --z-lightbox: 550; --z-toast: 600; --z-skip: 700; /* --------------------------------------------------------------------- 11. MOTION — springy, smooth, 260–420ms --------------------------------------------------------------------- */ --d-instant: 90ms; --d-fast: 160ms; --d-quick: 220ms; --d-base: 280ms; --d-slow: 380ms; --d-slower: 520ms; --d-slide: 680ms; /* slider crossfade / translate */ --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* THE momentum easing — overshoots */ --e-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-out, for panels */ --e-in-out: cubic-bezier(0.65, 0, 0.35, 1); --e-soft: cubic-bezier(0.4, 0, 0.2, 1); --e-linear: linear; --lift: translateY(-4px); --lift-lg: translateY(-7px); --stagger: 60ms; /* --------------------------------------------------------------------- 12. LAYOUT --------------------------------------------------------------------- */ --w-xs: 32rem; /* 512 — prose column */ --w-sm: 44rem; /* 704 */ --w-md: 60rem; /* 960 */ --w-lg: 75rem; /* 1200 */ --w-xl: 82.5rem; /* 1320 — THE container */ --w-2xl: 90rem; /* 1440 — wide bands */ --w-full: 120rem; /* 1920 — hard ceiling */ --container: var(--w-xl); /* The sticky chrome (topbar + header) sits on a wider grid than the page body: brand + 7-item nav + search + customiser + language + CTA need the extra room, and a full-bleed bar reading a little wider than the content is deliberate, not an accident. */ --w-chrome: var(--w-2xl); --header-h: 76px; --header-h-condensed: 64px; --topbar-h: 38px; /* Breakpoints — documented here for the page agents. CSS cannot read a custom property inside a media query, so these are the literal values every stylesheet in this theme uses: --bp-xs: 360px floor. no horizontal overflow below this. --bp-sm: 560px --bp-md: 768px --bp-lg: 1024px <- nav collapses to the drawer BELOW this --bp-xl: 1280px --bp-2xl: 1536px */ --bp-xs: 360px; --bp-sm: 560px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* --------------------------------------------------------------------- 13. COMPONENT-LEVEL TOKENS --------------------------------------------------------------------- */ --btn-h: 44px; --btn-h-sm: 36px; --btn-h-lg: 54px; --btn-px: var(--sp-5); --btn-px-lg: var(--sp-7); --control-h: 50px; /* inputs / selects */ --control-r: var(--r-md); --card-r: var(--r-xl); --card-pad: clamp(1.125rem, 0.9rem + 0.8vw, 1.625rem); --tile-r: var(--r-2xl); --icon-sm: 16px; --icon: 18px; --icon-lg: 22px; --tap: 44px; /* minimum touch target */ /* Media beds (product / category thumbs). In dark they stop being pastel. */ --media-bed: var(--surface-3); --media-wash: radial-gradient(120% 80% at 50% 110%, rgba(255,255,255,.65) 0%, rgba(255,255,255,0) 60%); } /* ========================================================================== DARK MODE — the explicit choice. Mirrored verbatim in the prefers-color-scheme block at the bottom of this file for the JS-disabled case. KEEP THEM IN SYNC. ========================================================================== */ :root[data-theme="dark"] { color-scheme: dark; /* The red ramp is re-lit, not re-hued: on a dark ground a red needs to come UP the scale to stay legible. #FF0010 on #171A22 is only 4.28:1, so small red text switches to a brightened red that clears 5:1. */ --red-brand: #FF1F2B; /* the logo red, a touch lifted for dark */ --red-action: #FF6B72; /* small red text on dark — 5.9:1 */ --red-plate: var(--red-600); /* the red SURFACE keeps its identity */ --brand: var(--red-brand); --brand-strong: #FF3D48; --brand-ink: var(--red-action); --brand-soft: rgba(255, 0, 16, .14); --brand-soft-line: rgba(255, 60, 72, .28); --brand-soft-fg: #FF8A90; --accent: #FB923C; --accent-strong: #FDBA74; --accent-soft: rgba(249, 115, 22, .14); --bg: #0E1015; --bg-warm: #12141B; --bg-tint: #171A22; --bg-ink: #090A0E; /* the footer slab, deeper than the page */ --bg-ink-2: #12141B; --surface: #171A22; --surface-2: #1D212B; --surface-3: #242935; --surface-4: #2E3441; --surface-ink: #090A0E; --text: #F2F4F8; /* 15.6:1 on --bg */ --text-2: #B6BDCA; /* 8.4:1 on --surface */ --text-3: #949CAC; /* 5.7:1 on --surface */ --text-faint: #6F778A; /* decorative / disabled only */ --text-on-brand: #FFFFFF; --text-on-ink: #F2F4F8; --text-on-ink-2: #A9AEBB; --line: #262B37; --line-strong: #333A49; --line-warm: #2B303C; --line-ink: rgba(255, 255, 255, 0.08); --line-ink-strong: rgba(255, 255, 255, 0.16); --link: var(--brand-ink); --link-hover: #FF9299; --overlay-1: rgba(255, 255, 255, 0.06); --overlay-2: rgba(255, 255, 255, 0.12); --overlay-inv-1: rgba(0, 0, 0, 0.20); --overlay-inv-2: rgba(0, 0, 0, 0.35); --invert-bg: #F2F4F8; --invert-bg-h: #FFFFFF; --invert-fg: #14161F; --note-bg: rgba(249, 115, 22, .12); --note-line: rgba(249, 115, 22, .30); --note-fg: #FDBA74; --note-icon: #FB923C; /* Support ramps re-lit for dark. The raw --ok-*/--err-* primitives are used directly as fills/text by badges + invalid-field states, so unlike the other ramps they MUST flip or they burn light holes on the dark page. */ --ok-50: rgba(16, 185, 129, .14); --ok-700: #34D399; /* success text/border, ~7:1 on surface */ --err-50: rgba(239, 68, 68, .13); --err-700: #FF8A90; /* validation text, ~5:1 on surface */ --focus: #93B4FF; --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus); --selection-bg: rgba(255, 0, 16, .35); --selection-fg: #FFFFFF; /* Gradients. The CTA gradient keeps white labels legible, so it may run a little hotter here — it is a lit object on a dark ground. */ --grad-cta: linear-gradient(112deg, #E30010 0%, #DC2C0C 52%, #DF5108 100%); --grad-cta-hover: linear-gradient(112deg, #FF0010 0%, #F53411 52%, #F55C0A 100%); --grad-hot: linear-gradient(112deg, #FF1F2B 0%, #FB923C 100%); --grad-hot-soft: linear-gradient(112deg, rgba(255,0,16,.16) 0%, rgba(249,115,22,.14) 100%); --grad-ink: linear-gradient(150deg, #1B1F2A 0%, #262B37 100%); --grad-paper: linear-gradient(180deg, #14161D 0%, var(--bg) 100%); --grad-red-surface: linear-gradient(112deg, var(--red-plate) 0%, #B8000B 100%); --glow-brand: 0 18px 40px -14px rgba(255, 0, 16, .55); --glow-brand-lg: 0 26px 60px -18px rgba(255, 0, 16, .68); --glow-amber: 0 18px 40px -14px rgba(249, 115, 22, .48); /* ELEVATION IN THE DARK. A black drop shadow on a near-black ground is invisible; what actually separates a dark card from a dark page is a LIT RIM plus a soft, wide ambient pool. So every step here is (rim) + (ambient), and --sh-ring becomes the glowing hairline that does most of the work. */ --sh-1: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .40); --sh-2: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px -2px rgba(0, 0, 0, .50), 0 8px 20px -10px rgba(0, 0, 0, .55); --sh-3: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 4px 10px -3px rgba(0, 0, 0, .55), 0 16px 34px -14px rgba(0, 0, 0, .65); --sh-4: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px -6px rgba(0, 0, 0, .58), 0 26px 54px -20px rgba(0, 0, 0, .72); --sh-5: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 12px 26px -8px rgba(0, 0, 0, .62), 0 44px 80px -28px rgba(0, 0, 0, .80); --sh-ring: inset 0 0 0 1px rgba(255, 255, 255, .07); --sh-ring-warm: inset 0 0 0 1px rgba(255, 235, 210, .07); --sh-header: 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(0, 0, 0, .85); --glass-bg: rgba(20, 23, 30, .68); --glass-bg-solid:rgba(17, 19, 26, .94); --glass-line: rgba(255, 255, 255, .09); --backdrop: rgba(4, 5, 8, .68); /* Chrome — default (non-red) header + drawer, in the dark. */ --hdr-line-lit: var(--glass-line); --hdr-fg: var(--text); --hdr-fg-2: #C4CBD8; --hdr-fg-3: var(--text-3); --hdr-hover-bg: var(--overlay-1); --hdr-hover-fg: #FFFFFF; --hdr-active-bg: var(--brand-soft); --hdr-active-fg: var(--brand-ink); --hdr-btn-bg: var(--overlay-1); --hdr-btn-fg: #C4CBD8; --hdr-btn-bg-h: var(--overlay-2); --hdr-btn-fg-h: #FFFFFF; --hdr-seg-bg: var(--overlay-1); --hdr-seg-line: var(--line); --hdr-seg-fg: var(--text-3); --hdr-seg-fg-on: #FFFFFF; --hdr-seg-thumb: var(--surface-4); --hdr-burger-bg: var(--surface-4); --hdr-burger-fg: #FFFFFF; --hdr-focus: var(--focus); --dw-bg: var(--surface); --dw-bg-2: var(--surface-2); --dw-line: var(--line); --dw-fg: var(--text); --dw-fg-2: var(--text-2); --dw-fg-3: var(--text-faint); --dw-hover-bg: var(--brand-soft); --dw-hover-fg: var(--brand-ink); --dw-active-bg: var(--brand-soft); --dw-active-fg: var(--brand-ink); --dw-sub-bg: var(--surface-3); --dw-btn-bg: var(--surface-3); --dw-btn-fg: var(--text-2); --dw-icon: var(--brand-ink); --dw-seg-bg: var(--overlay-1); --dw-seg-line: var(--line); --dw-seg-fg: var(--text-3); --dw-seg-fg-on: #FFFFFF; --dw-seg-thumb: var(--surface-4); --dw-focus: var(--focus); --media-bed: var(--surface-3); --media-wash: radial-gradient(120% 80% at 50% 110%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%); } /* ========================================================================== "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. Works in light AND dark, EN AND AR, because nothing downstream knows it exists. Legibility: the plate is #E30010 (4.91:1 with white), the gradient tail #C7000C (5.9:1). White nav labels, white icons and white small text on it all clear AA. The focus ring goes WHITE (a blue ring on red is invisible). ========================================================================== */ :root[data-header="red"] { --hdr-bg: var(--grad-red-surface); --hdr-bg-solid: var(--grad-red-surface); --hdr-line: transparent; --hdr-line-lit: rgba(255, 255, 255, .18); --hdr-sh: 0 1px 0 rgba(0, 0, 0, .10), 0 12px 34px -16px rgba(180, 0, 12, .55); --hdr-fg: #FFFFFF; --hdr-fg-2: #FFFFFF; --hdr-fg-3: rgba(255, 255, 255, .82); --hdr-hover-bg: rgba(255, 255, 255, .16); --hdr-hover-fg: #FFFFFF; --hdr-active-bg: #FFFFFF; --hdr-active-fg: var(--red-700); /* red-on-white pill: 5.52:1 */ --hdr-btn-bg: rgba(255, 255, 255, .16); --hdr-btn-fg: #FFFFFF; --hdr-btn-bg-h: #FFFFFF; --hdr-btn-fg-h: var(--red-700); --hdr-seg-bg: rgba(0, 0, 0, .18); --hdr-seg-line: rgba(255, 255, 255, .22); --hdr-seg-fg: rgba(255, 255, 255, .86); --hdr-seg-fg-on: var(--red-700); --hdr-seg-thumb: #FFFFFF; /* On red, a red CTA would vanish. It inverts: a white pill with red type. */ --hdr-cta-bg: #FFFFFF; --hdr-cta-fg: var(--red-700); --hdr-cta-sh: 0 10px 24px -10px rgba(0, 0, 0, .45), 0 2px 6px -2px rgba(0, 0, 0, .25); --hdr-burger-bg: rgba(255, 255, 255, .18); --hdr-burger-fg: #FFFFFF; --hdr-focus: var(--focus-on-red); /* The logo is its own red plate. On a red bar it would read as a smudge, so it gets a white chip — the same emblem treatment the footer uses on ink. */ --hdr-mark-plate: #FFFFFF; --hdr-mark-ring: 0 6px 16px -6px rgba(0, 0, 0, .35); } :root[data-sidebar="red"] { --dw-bg: var(--grad-red-surface); --dw-bg-2: rgba(0, 0, 0, .16); --dw-line: rgba(255, 255, 255, .20); --dw-fg: #FFFFFF; --dw-fg-2: rgba(255, 255, 255, .90); --dw-fg-3: rgba(255, 255, 255, .78); --dw-hover-bg: rgba(255, 255, 255, .16); --dw-hover-fg: #FFFFFF; --dw-active-bg: #FFFFFF; --dw-active-fg: var(--red-700); --dw-sub-bg: rgba(0, 0, 0, .16); --dw-btn-bg: rgba(255, 255, 255, .16); --dw-btn-fg: #FFFFFF; --dw-icon: #FFFFFF; --dw-seg-bg: rgba(0, 0, 0, .18); --dw-seg-line: rgba(255, 255, 255, .22); --dw-seg-fg: rgba(255, 255, 255, .86); --dw-seg-fg-on: var(--red-700); --dw-seg-thumb: #FFFFFF; --dw-cta-bg: #FFFFFF; --dw-cta-fg: var(--red-700); --dw-cta-sh: 0 10px 24px -10px rgba(0, 0, 0, .45); --dw-focus: var(--focus-on-red); --dw-mark-plate: #FFFFFF; } /* ========================================================================== ARABIC FONT — the customiser's fourth setting. re-points ONE token, --font-ar. The Latin typography (--font-display / --font-body / --font-num in LTR) is part of the theme's identity and is deliberately NOT touched by any of this. No attribute, an unknown value, or data-font="sultan" all resolve to the default, Sultan Nahia (see :root above). ========================================================================== */ :root[data-font="sultan"] { --font-ar: var(--fam-sultan); } :root[data-font="cairo"] { --font-ar: var(--fam-cairo); } :root[data-font="tajawal"] { --font-ar: var(--fam-tajawal); } :root[data-font="almarai"] { --font-ar: var(--fam-almarai); } :root[data-font="plexar"] { --font-ar: var(--fam-plexar); } :root[data-font="notosans"] { --font-ar: var(--fam-notosans); } :root[data-font="notokufi"] { --font-ar: var(--fam-notokufi); } :root[data-font="vazirmatn"] { --font-ar: var(--fam-vazirmatn); } :root[data-font="changa"] { --font-ar: var(--fam-changa); } :root[data-font="elmessiri"] { --font-ar: var(--fam-elmessiri); } :root[data-font="amiri"] { --font-ar: var(--fam-amiri); } /* ========================================================================== RTL / ARABIC — the only direction-sensitive token block. Everything else in this theme uses CSS logical properties, so there is no mirrored stylesheet anywhere. ========================================================================== */ [dir="rtl"] { /* Arabic type is ALWAYS --font-ar — never a hard-coded family — so the customiser's Arabic-font choice reaches every RTL surface at once. */ --font-display: var(--font-ar); --font-body: var(--font-ar); --font-num: 'Manrope', var(--font-ar); /* Arabic faces have no tracking design and a taller x-height: kill the negative letter-spacing (it breaks Arabic joining) and open the leading up. */ --ls-tighter: 0; --ls-tight: 0; --ls-normal: 0; --ls-wide: 0; --ls-wider: 0; --lh-tight: 1.35; --lh-snug: 1.45; --lh-heading: 1.42; --lh-normal: 1.85; --lh-relaxed: 2; /* Arabic renders optically smaller at the same px — nudge the display end of the scale up so headlines keep their weight on the page. */ --fs-3xl: clamp(1.75rem, 1.48rem + 1.35vw, 2.5rem); --fs-4xl: clamp(2rem, 1.62rem + 1.90vw, 3.125rem); --fs-5xl: clamp(2.375rem,1.80rem + 2.85vw, 3.875rem); /* Directional washes: flip the sweep. */ --scrim: linear-gradient(270deg, rgba(11,12,18,.86) 0%, rgba(11,12,18,.66) 42%, rgba(11,12,18,.12) 78%, rgba(11,12,18,0) 100%); --grad-cta: linear-gradient(248deg, #D40010 0%, #CE2B0B 52%, #CF4B08 100%); --grad-cta-hover: linear-gradient(248deg, #C0000E 0%, #BB2709 52%, #BC4407 100%); --grad-hot: linear-gradient(248deg, var(--red-brand) 0%, var(--amber-500) 100%); --grad-red-surface: linear-gradient(248deg, var(--red-plate) 0%, #C7000C 100%); } /* RTL x DARK — the gradients are redefined in BOTH blocks, so the direction flip has to be restated for the dark values or LTR gradients leak into RTL. */ :root[data-theme="dark"][dir="rtl"], :root[data-theme="dark"] [dir="rtl"] { --grad-cta: linear-gradient(248deg, #E30010 0%, #DC2C0C 52%, #DF5108 100%); --grad-cta-hover: linear-gradient(248deg, #FF0010 0%, #F53411 52%, #F55C0A 100%); --grad-hot: linear-gradient(248deg, #FF1F2B 0%, #FB923C 100%); --grad-red-surface: linear-gradient(248deg, var(--red-plate) 0%, #B8000B 100%); } /* Arabic needs a slightly heavier weight to match the optical colour of Plus Jakarta Sans at the same nominal weight. */ [dir="rtl"] { --fw-light: 300; --fw-regular: 400; --fw-medium: 400; --fw-semibold: 700; --fw-bold: 700; --fw-heavy: 800; } /* ========================================================================== NO-JS DARK FALLBACK. app.js's boot script stamps data-theme on before first paint, so this block only fires when scripting is off. It is a VERBATIM copy of the :root[data-theme="dark"] block above — if you change one, change both. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; --red-brand: #FF1F2B; --red-action: #FF6B72; --red-plate: var(--red-600); --brand: var(--red-brand); --brand-strong: #FF3D48; --brand-ink: var(--red-action); --brand-soft: rgba(255, 0, 16, .14); --brand-soft-line: rgba(255, 60, 72, .28); --brand-soft-fg: #FF8A90; --accent: #FB923C; --accent-strong: #FDBA74; --accent-soft: rgba(249, 115, 22, .14); --bg: #0E1015; --bg-warm: #12141B; --bg-tint: #171A22; --bg-ink: #090A0E; --bg-ink-2: #12141B; --surface: #171A22; --surface-2: #1D212B; --surface-3: #242935; --surface-4: #2E3441; --surface-ink: #090A0E; --text: #F2F4F8; --text-2: #B6BDCA; --text-3: #949CAC; --text-faint: #6F778A; --text-on-brand: #FFFFFF; --text-on-ink: #F2F4F8; --text-on-ink-2: #A9AEBB; --line: #262B37; --line-strong: #333A49; --line-warm: #2B303C; --line-ink: rgba(255, 255, 255, 0.08); --line-ink-strong: rgba(255, 255, 255, 0.16); --link: var(--brand-ink); --link-hover: #FF9299; --overlay-1: rgba(255, 255, 255, 0.06); --overlay-2: rgba(255, 255, 255, 0.12); --overlay-inv-1: rgba(0, 0, 0, 0.20); --overlay-inv-2: rgba(0, 0, 0, 0.35); --invert-bg: #F2F4F8; --invert-bg-h: #FFFFFF; --invert-fg: #14161F; --note-bg: rgba(249, 115, 22, .12); --note-line: rgba(249, 115, 22, .30); --note-fg: #FDBA74; --note-icon: #FB923C; /* Mirror of the support-ramp dark overrides (see the data-theme block). */ --ok-50: rgba(16, 185, 129, .14); --ok-700: #34D399; --err-50: rgba(239, 68, 68, .13); --err-700: #FF8A90; --focus: #93B4FF; --focus-ring: 0 0 0 3px var(--bg), 0 0 0 5px var(--focus); --selection-bg: rgba(255, 0, 16, .35); --selection-fg: #FFFFFF; --grad-cta: linear-gradient(112deg, #E30010 0%, #DC2C0C 52%, #DF5108 100%); --grad-cta-hover: linear-gradient(112deg, #FF0010 0%, #F53411 52%, #F55C0A 100%); --grad-hot: linear-gradient(112deg, #FF1F2B 0%, #FB923C 100%); --grad-hot-soft: linear-gradient(112deg, rgba(255,0,16,.16) 0%, rgba(249,115,22,.14) 100%); --grad-ink: linear-gradient(150deg, #1B1F2A 0%, #262B37 100%); --grad-paper: linear-gradient(180deg, #14161D 0%, var(--bg) 100%); --grad-red-surface: linear-gradient(112deg, var(--red-plate) 0%, #B8000B 100%); --glow-brand: 0 18px 40px -14px rgba(255, 0, 16, .55); --glow-brand-lg: 0 26px 60px -18px rgba(255, 0, 16, .68); --glow-amber: 0 18px 40px -14px rgba(249, 115, 22, .48); --sh-1: inset 0 0 0 1px rgba(255, 255, 255, .05), 0 1px 2px rgba(0, 0, 0, .40); --sh-2: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 2px 6px -2px rgba(0, 0, 0, .50), 0 8px 20px -10px rgba(0, 0, 0, .55); --sh-3: inset 0 0 0 1px rgba(255, 255, 255, .07), 0 4px 10px -3px rgba(0, 0, 0, .55), 0 16px 34px -14px rgba(0, 0, 0, .65); --sh-4: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px -6px rgba(0, 0, 0, .58), 0 26px 54px -20px rgba(0, 0, 0, .72); --sh-5: inset 0 0 0 1px rgba(255, 255, 255, .10), 0 12px 26px -8px rgba(0, 0, 0, .62), 0 44px 80px -28px rgba(0, 0, 0, .80); --sh-ring: inset 0 0 0 1px rgba(255, 255, 255, .07); --sh-ring-warm: inset 0 0 0 1px rgba(255, 235, 210, .07); --sh-header: 0 1px 0 rgba(255, 255, 255, .06), 0 14px 34px -18px rgba(0, 0, 0, .85); --glass-bg: rgba(20, 23, 30, .68); --glass-bg-solid:rgba(17, 19, 26, .94); --glass-line: rgba(255, 255, 255, .09); --backdrop: rgba(4, 5, 8, .68); --hdr-line-lit: var(--glass-line); --hdr-fg: var(--text); --hdr-fg-2: #C4CBD8; --hdr-fg-3: var(--text-3); --hdr-hover-bg: var(--overlay-1); --hdr-hover-fg: #FFFFFF; --hdr-active-bg: var(--brand-soft); --hdr-active-fg: var(--brand-ink); --hdr-btn-bg: var(--overlay-1); --hdr-btn-fg: #C4CBD8; --hdr-btn-bg-h: var(--overlay-2); --hdr-btn-fg-h: #FFFFFF; --hdr-seg-bg: var(--overlay-1); --hdr-seg-line: var(--line); --hdr-seg-fg: var(--text-3); --hdr-seg-fg-on: #FFFFFF; --hdr-seg-thumb: var(--surface-4); --hdr-burger-bg: var(--surface-4); --hdr-burger-fg: #FFFFFF; --hdr-focus: var(--focus); --dw-bg: var(--surface); --dw-bg-2: var(--surface-2); --dw-line: var(--line); --dw-fg: var(--text); --dw-fg-2: var(--text-2); --dw-fg-3: var(--text-faint); --dw-hover-bg: var(--brand-soft); --dw-hover-fg: var(--brand-ink); --dw-active-bg: var(--brand-soft); --dw-active-fg: var(--brand-ink); --dw-sub-bg: var(--surface-3); --dw-btn-bg: var(--surface-3); --dw-btn-fg: var(--text-2); --dw-icon: var(--brand-ink); --dw-seg-bg: var(--overlay-1); --dw-seg-line: var(--line); --dw-seg-fg: var(--text-3); --dw-seg-fg-on: #FFFFFF; --dw-seg-thumb: var(--surface-4); --dw-focus: var(--focus); --media-bed: var(--surface-3); --media-wash: radial-gradient(120% 80% at 50% 110%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%); } }