/* ============================================================ Storefront tokens — issue #128. This file sets CSS variables on :root ONLY. It has no component rules and no forced overrides. The old accent rules that used to live here (buttons, cards, badges, price, ...) leaked the store color into every theme. Those rules now live in the shared storefront CSS (omnimart.css) and read the tokens below, so a store theme can override any token without a leak. Order in : this file loads BEFORE each theme CSS, so a theme (html[data-store-theme=""]) can override any token. ============================================================ */ /* Tajawal — self-hosted brand font (issue #416). Every storefront theme loads this file, but one theme (theme2) does not load design-system.css. Declaring the @font-face here makes sure Tajawal is available on ALL themes. Paths climb two levels: this file lives in assets/storefront/css/ and the fonts live in assets/fonts/. Browsers keep only one copy per URL, so the repeat costs nothing. */ @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap; src: url('../../fonts/tajawal-400.woff2') format('woff2'); } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap; src: url('../../fonts/tajawal-500.woff2') format('woff2'); } @font-face { font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap; src: url('../../fonts/tajawal-700.woff2') format('woff2'); } :root { /* Legacy primary aliases — other CSS/JS still reads these. */ --c-primary: #CE6146; --c-primary-dark: #A84F39; --c-primary-rgb: 206,97,70; --c-primary-light: rgba(206,97,70, .08); /* Per-store accent tokens (design.md 4.2) — the components read these. */ --accent: #CE6146; --accent-deep: #A84F39; --accent-weak: rgba(206,97,70,.14); --accent-tint: rgba(206,97,70, .08); --accent-rgb: 206,97,70; /* The ink to print ON each accent shade (issue #1588). Themes used to write `color: #fff` on `var(--accent)`, which is only safe on a DARK accent. On the bright orange one demo store picked, white text measured 2.87:1, and normal text needs 4.5:1. These two are worked out from the accent brightness in storefront_on_color(), so every colour a merchant picks stays readable with no action from them. (No hex here on purpose — this file's only literal colour must stay the vermilion fallback.) */ --on-accent: #000000; --on-accent-deep: #FFFFFF; /* Per-theme token set — defaults are the Modern theme values. Each store theme overrides these in its own theme CSS, scoped by html[data-store-theme=""] (issue #128). */ --radius: 14px; --btn-radius: 999px; --shadow: 0 1px 3px rgba(2,6,23,.08), 0 1px 2px rgba(2,6,23,.04); --font: 'Tajawal', 'IBM Plex Sans', Arial, sans-serif; /* Card tokens (Modern: white card, light border, soft shadow). */ --card-bg: #ffffff; --card-border: #ECE9E2; --card-radius: 14px; --card-shadow: 0 1px 3px rgba(2,6,23,.08), 0 1px 2px rgba(2,6,23,.04); /* Price color — a token so a theme can change it (was hardcoded accent). */ --price-color: var(--accent); } /* design-system.css sets --accent to the brand on :root[data-theme="light"] (and dark). On the storefront the accent must be the STORE color, so we re-assert it here with matching specificity. This file loads AFTER design-system.css, so on a tie the store color wins. This is what makes the shared design-system components (components.css / commerce.css) follow the store color on the storefront (design.md 4.2). */ :root[data-theme] { --accent: #CE6146; --accent-deep: #A84F39; --accent-weak: rgba(206,97,70,.14); --focus-ring: color-mix(in srgb, var(--accent) 40%, transparent); /* Re-asserted with the accent (#1588). A page that matched this block but not the plain :root one would keep the store accent and LOSE its ink. */ --on-accent: #000000; --on-accent-deep: #FFFFFF; }