/* ============================================================================ BENIS SHOES — DESIGN TOKENS ---------------------------------------------------------------------------- The single source of truth for colour, type, space, radius, elevation and motion. Nothing in this file styles an element; it only declares values. Rules for this layer: - Every other stylesheet consumes these tokens and never hardcodes a hex, a px spacing value or a duration. - Tokens are named by ROLE (--color-action) not by appearance (--color-blue), except for the raw ramps, which exist so roles have something to point at. - There is exactly one :root block in the whole theme. It is this one. Palette derivation (not invented — measured): The brand blue is sampled from the Benis logo: #51CAFE, hue 198deg, sat 99%, lightness 66%. That colour is only 1.87:1 on white, so it can never carry text or act as a white-on-fill button. Rather than darken it into a blue that is no longer the logo, the system uses it the way the logo does — as a bright FILL — and pairs it with dark ink, which measures 9.28:1. The logo colour therefore stays literally present on the primary call to action. Where white-on-blue is unavoidable, --blue-700 (#017DB2, 4.59:1) is used. ========================================================================== */ :root { /* ── Blue ramp — hue locked to the logo's 198deg ─────────────────────── */ --blue-50: #ECF8FE; --blue-100: #CFEFFC; --blue-200: #9FDEF9; --blue-300: #71D4FE; --blue-400: #51CAFE; /* THE LOGO BLUE — brand anchor, fills only */ --blue-500: #1BB9FE; --blue-600: #01A0E4; --blue-700: #017DB2; /* 4.59:1 with white — smallest safe white-on-blue */ --blue-800: #016089; /* 6.92:1 on white — links, blue text */ --blue-900: #01405B; /* 11.1:1 on white */ /* ── Berry ramp — the secondary accent ─────────────────────────────── Warm counterweight to a cool 198deg blue. Chosen over dusty coral and warm blush because it is the only warm option in that family that reaches AA as text on white (4.68:1) without turning brown. */ --berry-50: #FBF2F4; --berry-100: #F6E3E8; --berry-200: #EBC3CD; --berry-300: #DD9DAE; --berry-400: #C87A8E; --berry-500: #B4566B; /* 4.68:1 on white — safe for label-size text */ --berry-600: #9C4459; --berry-700: #7F3546; --berry-800: #612734; --berry-900: #421A23; /* ── Neutrals — warm at the light end, cool at the ink end ─────────────── The LIGHT neutrals carry the berry hue (347deg, the same one the accent ramp is built on) at a few percent saturation. They are the tints the page canvas is made of — fills, chips, quiet bands, hairlines — and a cool grey chip sitting on a warm canvas reads faintly green, so they follow the canvas rather than the brand. The INK neutrals keep their blue cast, which is what warm paper and cool ink have always done. Their lightness is untouched, so every contrast ratio quoted below still holds exactly. Each tint below is its old value rotated to 347deg at the SAME HSL lightness and saturation — the ramp's steps are unchanged, only its temperature is. */ --neutral-0: #FFFFFF; --neutral-25: #FCFAFA; --neutral-50: #F9F5F6; --neutral-100: #F3EDEE; --neutral-200: #EADFE1; --neutral-300: #D8C7CB; --neutral-400: #8A96A3; /* 3.01:1 — NON-TEXT only: icons, borders, rules */ --neutral-500: #677483; /* 4.77:1 on white — smallest safe muted text */ --neutral-600: #515D6C; --neutral-700: #3A4552; --neutral-800: #24303E; --neutral-900: #0F1B2A; /* ink — 17.4:1 on white, 9.28:1 on --blue-400 */ /* ── Status ─────────────────────────────────────────────────────────── */ --green-50: #ECFAF3; --green-500: #12855A; /* 4.63:1 on white */ --green-700: #0B5B3D; --amber-50: #FEF7EC; --amber-500: #9A6410; /* 4.99:1 — used with an icon, never colour-only */ --amber-700: #6E4709; --red-50: #FDF2F3; --red-500: #C8283F; /* 5.48:1 on white */ --red-700: #8F1C2C; /* ── Semantic roles ─────────────────────────────────────────────────── */ /* Surfaces ---------------------------------------------------------------------- The PAGE canvas and a CARD are not the same white. The storefront used pure #FFF for both, so every card, rail and panel dissolved into the document behind it and the only thing giving them an edge was a hairline border — which is why the site read as flat and, in the owner's words, "too white". --surface-page is a soft off-white: unmistakably white beside the cyan, but two steps down from the card surface, so white content now LIFTS instead of merging. It is deliberately kept above --surface-soft, which stays reserved for inset fills (the search field, chips, quiet bands) — those have to stay legible sitting ON the canvas. Its tint is ROSE, not the cool grey it started as: hue 347deg — the accent ramp's own hue — at 55% saturation and 97.2% lightness. That is eight points of spread across the channels, which is enough to feel warm under a whole page and nowhere near enough to read as a pink page. A shop for women's shoes whose canvas leans a few degrees warm sells something; a cool grey-blue canvas under a cyan logo sells a dashboard. The light neutrals above are rotated to the same hue so the chips and hairlines sitting on this canvas belong to it. */ --surface: var(--neutral-0); --surface-page: #FFFFFF; --surface-soft: var(--neutral-50); --surface-sunken: var(--neutral-100); --surface-inverse: var(--neutral-900); --surface-brand: var(--blue-50); --surface-accent: var(--berry-50); /* Text */ --text: var(--neutral-900); --text-muted: var(--neutral-500); --text-inverse: var(--neutral-0); /* Deliberately NOT a --text-* token. neutral-400 is 3.01:1, which is legal for icons and borders but illegal for text. Naming it --icon-* stops it being reached for as a "lighter grey text" the way the old theme did. */ --icon-muted: var(--neutral-400); --text-link: var(--blue-800); --text-accent: var(--berry-500); --text-on-brand: var(--neutral-900); /* the 9.28:1 pairing */ /* Borders */ --border: var(--neutral-200); --border-strong: var(--neutral-300); --border-inverse: rgb(255 255 255 / 0.16); --border-focus: var(--blue-700); /* Brand + action ---------------------------------------------------------------------- The primary call to action carries the LOGO BLUE, as the palette derivation at the top of this file describes. Benis already owns a strong blue identity; suppressing it to near-black because most fashion retailers use black would trade this brand for a generic one. The goal is a polished Benis, not an imitation of another storefront. Accessibility is handled by the pairing, not by abandoning the colour: #51CAFE is 1.87:1 on white and can never carry white text, so a blue fill always takes DARK INK (--text-on-brand, 9.28:1). Where white-on-blue is genuinely unavoidable (a scrim over photography, an inverse surface), --blue-700 (4.59:1) is the smallest legal value — never --blue-400. */ --brand: var(--blue-400); /* the logo colour — brand anchor */ --brand-hover: var(--blue-500); --brand-active: var(--blue-600); --brand-soft: var(--blue-50); /* tinted surfaces, active states */ --action: var(--blue-400); /* primary CTA fill */ --action-hover: var(--blue-500); --action-active: var(--blue-600); --action-text: var(--neutral-900);/* dark ink on blue — 9.28:1 */ --accent: var(--berry-500); --accent-hover: var(--berry-600); /* Feedback */ --success: var(--green-500); --success-surface: var(--green-50); --warning: var(--amber-500); --warning-surface: var(--amber-50); --danger: var(--red-500); --danger-surface: var(--red-50); --sale: var(--red-500); /* price reductions, sale badges */ /* ── Typography ────────────────────────────────────────────────────── Estedad is the Persian face. Persian script has taller ascenders and more diacritic headroom than Latin, so line-heights here are looser than a Latin scale would use — but nowhere near the 2.0 the old theme set globally, which made body copy feel disconnected. */ --font-sans: 'Estedad', -apple-system, 'Segoe UI', Tahoma, sans-serif; --font-num: 'Estedad', system-ui, sans-serif; --text-caption: 0.75rem; /* 12px */ --text-small: 0.8125rem; /* 13px */ --text-label: 0.875rem; /* 14px */ --text-body: 1rem; /* 16px */ --text-body-lg: 1.125rem; /* 18px */ --text-h3: 1.25rem; /* 20px */ --text-h2: clamp(1.375rem, 1.15rem + 1.1vw, 1.75rem); --text-h1: clamp(1.625rem, 1.25rem + 1.9vw, 2.25rem); --text-display: clamp(2rem, 1.4rem + 3vw, 3.25rem); --leading-tight: 1.35; --leading-snug: 1.5; --leading-normal: 1.75; /* Persian body copy */ --leading-loose: 1.9; /* Estedad is a variable face covering 100-900, but this scale stops at 400. A --weight-light: 300 was added for "editorial" display type and then went unused everywhere, because Persian at 300 reads as under-inked rather than refined — the script's strokes are finer than a Latin face at the same weight, so light display type just loses the headline. Hierarchy here comes from 400/500/600/700, which is ample. */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Tracking — constrained by the script, not by fashion convention. ---------------------------------------------------------------------- Persian is a CURSIVE script: letters join. Positive letter-spacing pulls those joins apart and renders words visibly broken, and there is no uppercase to pair it with. The previous pass set 0.14em + uppercase on .product-card__cat, .plp__kicker, .plp__count, .badge and .hero__kicker — all of which render Persian — so the "editorial" treatment was actively damaging the typography it was meant to refine. There is therefore exactly ONE tracking token, for headings. Label and button tracking tokens existed, both set to 0, which is a no-op token inviting someone to "just give it a little" later. If a genuinely Latin string ever needs opening up (a size code, a wordmark), set it locally behind :lang(en) — do not reintroduce a global label tracking value. */ --tracking-heading: -0.01em; /* ── Spacing — 4px base, no arbitrary values ─────────────────────────── */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ --space-20: 5rem; /* 80px */ --space-24: 6rem; /* 96px */ /* Vertical rhythm between page sections, fluid so mobile is not airy */ --section-gap: clamp(2.5rem, 1.8rem + 3.5vw, 5rem); --section-gap-sm: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); /* ── Radius — a controlled scale, not a single global value ────────── Softness is part of the Benis identity, so the system does not flatten everything to near-square. It also does not make everything a bubble: the old theme applied ~24px indiscriminately, which is why it read as a template. Radius here is assigned by ROLE, largest on the expressive surfaces and smallest on utility chrome, so the softness reads as deliberate rather than decorative. */ --radius-xs: 4px; /* utility chrome: inputs, tags, table cells */ --radius-sm: 8px; /* small controls, swatches, icon buttons */ --radius-md: 12px; /* buttons — deliberate, not a pill */ --radius-lg: 16px; /* cards, panels, surfaces */ --radius-xl: 24px; /* floating navigation, sheets, modals */ --radius-2xl: 32px; /* the campaign hero — the most expressive surface */ --radius-pill: 999px; /* chips, badges and the search field ONLY */ /* Product and campaign imagery keeps a soft corner, because that softness is Benis. It is restrained relative to the hero so the catalogue reads as product rather than as a row of app tiles. */ --radius-media: 14px; /* ── Product image ratio ───────────────────────────────────────────── ONE value for every box that holds a product photograph: the card, the PDP gallery and its thumbnails, cart lines, order thumbnails, wishlist plates, quick view. It is 3:4 because that is how the catalogue is actually shot (the source files are 1142x1510). It is a token because it is not only a CSS number — the same ratio is declared in PHP as BENIS_PRODUCT_RATIO, which sizes the files WooCommerce generates. If the two disagree, every product image gets cropped twice: once on upload and once by object-fit. Change both. */ --ratio-product: 3 / 4; /* ── Elevation — low and cool, never a heavy drop ────────────────────── */ --shadow-xs: 0 1px 2px rgb(15 27 42 / 0.05); --shadow-sm: 0 2px 6px rgb(15 27 42 / 0.06); --shadow-md: 0 6px 16px rgb(15 27 42 / 0.08); --shadow-lg: 0 16px 40px rgb(15 27 42 / 0.12); --shadow-focus: 0 0 0 3px rgb(1 125 178 / 0.35); /* ── Motion ─────────────────────────────────────────────────────────── */ --ease: cubic-bezier(0.2, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --duration-fast: 120ms; --duration-base: 200ms; --duration-slow: 320ms; /* ── Layout ─────────────────────────────────────────────────────────── */ --container: 1280px; --container-wide: 1440px; --container-text: 68ch; --gutter: clamp(1rem, 0.7rem + 1.5vw, 2rem); --header-height: 56px; --header-height-lg: 72px; /* ── The floating mobile bar ───────────────────────────────────────── --mobile-nav-height is the TAP ROW only. The bar is a floating pill, so the space it actually occupies is that row plus its own padding, its border, and the gap it floats above the viewport edge. Anything that has to sit clear of it — the PDP's sticky purchase bar, the page's bottom padding — must use --mobile-nav-clearance, never the height. Using the height was a real bug: the purchase bar sat at 60px while the pill occupied 12–82px, so the two overlapped by 22px and the "add to cart" button was partly buried under the navigation. */ --mobile-nav-height: 60px; --mobile-nav-gap: var(--space-3); /* float distance from the edge */ --mobile-nav-pad: 0.375rem; /* the pill's inner padding */ --mobile-nav-clearance: calc( var(--mobile-nav-gap) + env(safe-area-inset-bottom, 0px) + var(--mobile-nav-height) + (var(--mobile-nav-pad) * 2) + 2px /* the pill's 1px border, twice */ ); /* Minimum comfortable touch target. Used, not aspirational. */ --tap-target: 44px; /* ── Z-index — one ladder, no ad-hoc 9999 ───────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-header: 200; --z-backdrop: 300; --z-drawer: 400; --z-modal: 500; --z-toast: 600; } /* Motion is decorative everywhere in this theme; nothing depends on it to be understood. Honour the user's preference globally rather than per-component. */ @media (prefers-reduced-motion: reduce) { :root { --duration-fast: 0.01ms; --duration-base: 0.01ms; --duration-slow: 0.01ms; } }