/* ========================================================================== iMagnet design tokens SINGLE SOURCE OF TRUTH. Every value here maps 1:1 into the WordPress theme.json when this preview becomes the block theme. Locked 2026-07-20 in clients/besamim-turkiye/store/brand-system.md ========================================================================== */ :root { /* --- Color ------------------------------------------------------------ Aligned 2026-07-21 to the FINAL logo files, not to brand-direction.html. Those two disagreed: the doc said green #15281C / gold #CBA45A, while the approved logo art is built on #14301F / #E8BF70. Same hues, but the logo runs ~10 points more saturated on the green and ~20 on the gold, which is the difference the owner could see. The logo wins for a concrete reason: og-share.png and logo-full-gold-on-green.svg carry a baked-in green background, so any other site green shows a visible rectangle seam behind the logo. It also measures better everywhere (gold on green 6.65 -> 8.23). ---------------------------------------------------------------------- */ --c-primary: #14301F; /* deep green: header, hero, punctuation blocks */ --c-primary-soft: #1C3E28; /* deep green, one step up: hover, flag bar */ --c-accent: #E8BF70; /* gold: hairlines, the arch, price, CTA fill */ --c-accent-soft: #F2D6A0; /* gold, lighter: hover */ --c-bg: #F7F4E9; /* ivory page background */ /* Channel values, so a tint is never a second place to change the brand. */ --rgb-primary: 20, 48, 31; --rgb-accent: 232, 191, 112; --c-surface: #FFFFFF; /* cards, panels, form fields */ --c-text: #1C1A17; /* primary text on light 15.8:1 */ --c-muted: #8A8178; /* NON-TEXT ONLY: dividers, icons. 3.5:1 fails */ --c-muted-text: #6B6259; /* the brand muted, darkened for real text 5.4:1 */ --c-hairline: #E7E1D4; /* 1px rules on light */ /* The one error colour. A form that can fail needs a colour that is not the brand green (which reads as "went well"), so this is the system's, not a one-off hex in a component. A deep brick, chosen to sit inside the warm palette rather than shout at it: 8.3:1 on --c-surface and 7.5:1 on --c-bg, so it is legal as TEXT and not only as a border. Never the sole signal: every error also carries words. */ --c-danger: #8C2F1D; /* form errors 8.3:1 on white, 7.5:1 ivory */ --c-on-dark: #F4EDE1; /* text on deep green 12.3:1 */ --c-on-dark-muted: rgba(244, 237, 225, 0.62); /* on FLAT green only 5.6:1 */ /* Secondary text over a photograph, not over a flat colour. 62% is tuned for a known background; on the hero plate it measured 4.26:1 at 390px and 4.53:1 at 1440, against a 4.5:1 legal floor, so it failed on a phone and passed by 0.03 on a desktop. The honest fix is weight, not a darker photograph: pushing the scrim until 62% works would have buried the image the hero exists to show. At 78% the same pixels measure 5.7:1 and 6.1:1. Measured by check-hero-contrast.mjs on the rendered page. */ --c-on-scene-muted: rgba(244, 237, 225, 0.78); --c-line-on-dark: rgba(var(--rgb-accent), 0.30); /* gold hairline on green */ --c-arch-on-dark: rgba(var(--rgb-accent), 0.50); /* the arch reads as a form */ /* The keyboard focus ring. A SEPARATE token from --c-accent, and that is the whole point: the ring used to BE the gold, which measures 8.23:1 on the deep green and 1.57:1 on ivory — so on every light surface in the store the ring was invisible, against the 3:1 that WCAG 2.4.11 requires of a focus indicator. Recolouring --c-accent was never an option: gold on green is the brand, and it is the one place the gold is legal. So the ring is surface-aware and rides on inheritance: the deep green here, flipped to gold inside the dark chrome below. A component never picks; it inherits whichever is correct where it happens to sit. Measured: green ring 12.95:1 on ivory / 14.26:1 on white; gold ring 8.23:1 on the deep green / 6.85:1 on the soft green. */ --c-ring: var(--c-primary); /* --- Type ------------------------------------------------------------- */ /* Both stacks are self-hosted (css/fonts.css + assets/fonts/*.woff2). "IBM Plex Sans Arabic" sits in each stack as a FALLBACK, never as a replacement: font fallback resolves per glyph, so Hebrew and Latin keep the exact families they always had and only an Arabic character ever reaches it. Its @font-face carries the Arabic unicode-range, so a page with no Arabic on it never downloads the file. That is why the Arabic site needs no html[lang] rule to look right - and cannot break the Hebrew one. Latin inside an Arabic page (Enki, MaxVolmer) still gets Cormorant, which is the whole reason it is appended and not swapped. */ --f-he: "IBM Plex Sans Hebrew", "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, sans-serif; --f-la: "Cormorant Garamond", "IBM Plex Sans", "IBM Plex Sans Arabic", system-ui, serif; --fw-light: 300; --fw-book: 400; --fw-medium: 500; /* Fluid scale. Display sits far above body on purpose: the typeface is a humanist sans, so the luxury has to come from scale and air, not weight. */ --t-display: clamp(2.15rem, 4.5vw, 3.6rem); --t-title: clamp(1.8rem, 3.6vw, 2.8rem); --t-subtitle: clamp(1.15rem, 1.9vw, 1.45rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-meta: 0.8125rem; --t-eyebrow: 0.75rem; /* Latin product names are always tracked uppercase. That bilingual contrast is the page's texture: quiet Hebrew, spaced Latin. */ --tr-eyebrow: 0.24em; --tr-latin: 0.18em; /* --- Space ------------------------------------------------------------ */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 1rem; --s-4: 1.5rem; --s-5: 2.5rem; --s-6: 4rem; --s-7: 6rem; --s-8: 8rem; /* --- Structure -------------------------------------------------------- */ --container: 1240px; --gutter: clamp(1.25rem, 5vw, 4rem); /* The arch. Derived from the logo mark: an upright, a semicircular crown, an upright. 999px clamps to half the width = a true semicircle. */ --arch-crown: 999px; /* Corner radius. One softening step across the whole system, so buttons, inputs, cards and framed panels read a touch friendlier without turning into pills. --radius-sm is for controls and small frames, --radius for larger cards and panels. Maps 1:1 to the theme.json radius scale in WP. */ --radius-sm: 8px; --radius: 13px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } /* --- Contrast rules, measured not guessed -------------------------------- Checked against the ivory surface #F7F4E9 (WCAG AA needs 4.5:1 for text). Israeli standard 5568 makes this a legal requirement, and the store ships an accessibility statement, so these are not preferences. text #1C1A17 15.8:1 ok anywhere green #15281C 14.1:1 ok anywhere muted-text #6B6259 5.4:1 ok for captions and meta muted #8A8178 3.5:1 FAILS as text. dividers and icons only gold #CBA45A 2.1:1 FAILS as text on light. decoration only So gold carries text only on the deep green (6.7:1 there), and every eyebrow flips to green on light surfaces. Gold on ivory is reserved for hairlines, the arch, and button fills, where contrast rules do not apply. -------------------------------------------------------------------- */