/** * Design tokens. * * Values come from the approved canvas — runs/2026-09-07-theme-rebuild/canvas/, * "ספריית רכיבים" (Components.dc.html) for the palette and type scale, * Main.dc.html for the container and section rhythm. The two font families come * from the typography decision of 2026-09-06 (Miriam Libre + Assistant). * * Two deliberate departures from the old design-system plugin: * * 1. Tokens sit on :root, not on `body.hpds-enabled`. That class existed to * raise specificity against the Luchiana stylesheet. There is no competing * stylesheet here, so the scoping is dead weight. * * 2. No @layer. Cascade layers lose to any unlayered rule, which is exactly how * the old 99-compat.css defeated them. With one stylesheet chain owning the * page, source order is enough. */ :root { /* ---- palette ---- */ --hp-brand: #0d0d0d; --hp-brand-hover: #2b2b2b; --hp-brand-press: #000000; --hp-accent: #c28565; --hp-accent-hover: #ab6e4d; --hp-accent-soft: #e7c1b4; --hp-club: #b88a1f; --hp-sale: #b42318; --hp-success: #246b4a; /* Washes. * * Each is its own hue at ~7% over white, so a tinted row reads as related to * the mark it carries rather than as a second grey. They are the only * backgrounds allowed behind coloured text — a club price on a club wash, a * sale note on a sale wash — which keeps contrast predictable without a * per-component colour decision. */ --hp-accent-tint: #f9efe9; --hp-club-tint: #faf2df; --hp-sale-tint: #fceeec; --hp-success-tint: #e9f2ed; --hp-text: #171717; --hp-text-muted: #62666b; --hp-text-disabled: #aaa9a2; --hp-text-inverse: #ffffff; --hp-link: #713e30; --hp-link-hover: #4e291f; --hp-surface: #ffffff; --hp-surface-subtle: #f1f3f2; --hp-surface-warm: #f7f3f0; --hp-surface-inverse: #0d0d0d; --hp-border: #deded9; --hp-border-strong: #aaa9a2; --hp-focus: #1769aa; /* ---- type ---- * Miriam Libre ships 400 and 700 only. The canvas draws its H1 at 800; at * that weight the browser would synthesise a fake bold, so display headings * cap at 700 and the size carries the emphasis instead. Assistant (200-800) * keeps the full range for UI and commerce numerals. */ --hp-font-ui: "Assistant", Arial, sans-serif; --hp-font-display: "Miriam Libre", Arial, sans-serif; --hp-text-xs: 0.8125rem; /* 13px — helper text */ --hp-text-sm: 0.875rem; /* 14px — badges, meta */ --hp-text-base: 1rem; /* 16px — body */ --hp-text-md: 1.0625rem; /* 17px — lead-in */ --hp-text-lg: 1.1875rem; /* 19px — price */ --hp-text-h3: 1.375rem; /* 22px */ --hp-text-h2: 1.75rem; /* 28px */ --hp-text-h1: 3rem; /* 48px */ --hp-text-hero: 3.25rem; /* 52px — home hero only */ --hp-leading-tight: 1.15; --hp-leading-heading: 1.25; --hp-leading-body: 1.65; /* ---- space ---- */ --hp-space-1: 0.25rem; --hp-space-2: 0.5rem; --hp-space-3: 0.75rem; --hp-space-4: 1rem; --hp-space-5: 1.25rem; --hp-space-6: 1.5rem; --hp-space-7: 1.75rem; --hp-space-8: 2rem; --hp-space-10: 2.5rem; --hp-space-12: 3rem; --hp-space-14: 3.5rem; --hp-space-16: 4rem; /* ---- layout ---- * The canvas draws 1280px artboards with a 1248px container and 32px of * padding, so the content column lands at 1184px. */ --hp-container: 78rem; /* 1248px */ --hp-container-narrow: 50rem; /* For pages that are a grid of many small things rather than a column of * reading — the brand index is the one that asked for it. At 78rem an A-Z * of 200 brands wastes the sides of a desktop screen. */ --hp-container-wide: 88rem; /* 1408px */ --hp-gutter: 2rem; /* 32px */ --hp-section-space: 3.5rem; /* 56px — the canvas section rhythm */ /** * ---- shape ---- * * A four-step scale, deliberately softer than the artboard's. * * The canvas drew everything at 8px, which on a shop whose buttons are all * pills read as two different products on one page: fully round controls * sitting on barely-rounded cards. Raising the base to 12px and giving * panels a step of their own settles that — the corner language is now one * curve getting larger with the surface, rather than a hard rectangle with * round buttons stuck to it. * * Because everything reads these names rather than stating a radius, this * block is the site's corner style in four lines. Nothing else has to change * to make the whole shop rounder or squarer. */ --hp-radius-sm: 0.375rem; /* 6px — badges, chips-with-corners, swatches */ --hp-radius: 0.75rem; /* 12px — cards, image blocks, inputs */ --hp-radius-lg: 1.125rem; /* 18px — panels, drawers, media frames */ --hp-radius-xl: 1.75rem; /* 28px — full-width surfaces and hero blocks */ --hp-radius-pill: 999px; /* buttons, search, chips */ --hp-control-height: 3rem; /* 48px — the canvas button height */ --hp-shadow-sm: 0 0.125rem 0.5rem rgb(17 17 17 / 0.08); --hp-shadow-md: 0 0.75rem 2rem rgb(17 17 17 / 0.12); --hp-shadow-focus: 0 0 0 0.1875rem color-mix(in srgb, var(--hp-focus) 32%, transparent); /* ---- elevation on interaction ---- * Two shadows, used consistently: `lift` is what a card or a button gains * while the pointer is on it, `press` is what it drops to while held. Both * are warm-black rather than pure black, so an element lifting off the warm * background does not ring grey. The pair is always used with the matching * translate below, never on its own — a shadow that appears without motion * reads as a rendering artefact. */ /* Tight and dark rather than wide and faint: a 14%-opacity shadow spread * over 36px is invisible under a black pill on a white page, which is what * made the button hover read as "nothing happens". At 10px and 26% the lift * is legible on black, and still soft under a white card. */ --hp-shadow-lift: 0 0.625rem 1.375rem rgb(23 20 18 / 0.26); --hp-shadow-press: 0 0.0625rem 0.25rem rgb(23 20 18 / 0.2); --hp-lift: -2px; /* translateY while hovered */ --hp-lift-card: -4px; /* A hairline that sits inside the element's own edge. On a dark button it is * a light highlight, which is what stops a large flat black pill from * reading as a hole in the page. */ --hp-gloss: linear-gradient(180deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0) 62%); /* ---- icons ---- * Decorative marks only, carried as masks so they inherit currentColor. * Anything meaningful is real in the markup, where it can take a * title or aria-hidden as appropriate. */ --hp-icon-star: url('data:image/svg+xml;utf8,'); --hp-icon-chevron: url('data:image/svg+xml;utf8,'); /* The four promise marks on the home page. Stroked, so the mask is the * stroke itself and the icon takes whatever colour its row is given. */ --hp-icon-shield: url('data:image/svg+xml;utf8,'); --hp-icon-truck: url('data:image/svg+xml;utf8,'); --hp-icon-medal: url('data:image/svg+xml;utf8,'); --hp-icon-menu: url('data:image/svg+xml;utf8,'); --hp-icon-close: url('data:image/svg+xml;utf8,'); --hp-icon-lock: url('data:image/svg+xml;utf8,'); --hp-icon-eye: url('data:image/svg+xml;utf8,'); --hp-icon-pin: url('data:image/svg+xml;utf8,'); /* ---- motion ---- */ --hp-duration-fast: 140ms; --hp-duration: 260ms; --hp-duration-slow: 480ms; --hp-ease: cubic-bezier(0.2, 0, 0, 1); /* Decelerating: it leaves immediately and settles slowly, which is what * makes an image zoom or a lift feel expensive rather than mechanical. */ --hp-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* ---- stacking ---- */ --hp-z-sticky: 20; --hp-z-menu: 40; --hp-z-overlay: 60; --hp-z-modal: 80; --hp-z-toast: 100; }