/** * KAUFLOND — Design tokens * * The ONLY place raw colour, spacing, radius and size values are allowed to live. * Every other stylesheet in this theme must reference these custom properties and * must never hard-code a hex value, a pixel spacing or a radius. * * Phase 2: the placeholder palette has been replaced with the approved KAUFLOND * brand colours. KAUFLOND is an independent German retailer — this palette is * its own and is not Kaufland's brand identity. * * The second block bridges these tokens into WoodMart's own CSS variables. That * is deliberate: setting --wd-* is how you change WoodMart's container width, * form height and form radius without overriding its selectors and without * fighting its grid maths. * * Naming: --kfl--[-] * * @package Kauflond * @since 1.0.0 */ :root { /* --------------------------------------------------------------------- * BRAND — approved KAUFLOND palette * ------------------------------------------------------------------ */ --kfl-color-brand-primary: #C8102E; --kfl-color-brand-primary-hover: #A50D26; --kfl-color-brand-primary-active: #870A1F; --kfl-color-brand-on-primary: #FFFFFF; --kfl-color-brand-secondary: #1F2933; --kfl-color-brand-secondary-hover: #111A21; --kfl-color-brand-on-secondary: #FFFFFF; /* Promotional accent. Dark text on it — the yellow is too light for white. */ --kfl-color-accent: #FFD54A; --kfl-color-accent-hover: #F5C52E; --kfl-color-accent-contrast: var(--kfl-color-brand-secondary); /* --------------------------------------------------------------------- * TEXT * ------------------------------------------------------------------ */ --kfl-color-text-primary: #1F2933; --kfl-color-text-secondary: #52606D; --kfl-color-text-muted: #667380; /* 4.9:1 on white — #7B8794 was 3.7:1, below AA for the 12px brand/count text */ --kfl-color-text-inverse: #FFFFFF; --kfl-color-link: var(--kfl-color-text-primary); --kfl-color-link-hover: var(--kfl-color-brand-primary); /* --------------------------------------------------------------------- * SURFACES — white / light-neutral, per the retail direction * ------------------------------------------------------------------ */ --kfl-color-surface: #FFFFFF; --kfl-color-surface-subtle: #F5F6F7; --kfl-color-surface-sunken: #ECEEF1; --kfl-color-surface-inverse: var(--kfl-color-brand-secondary); /* --------------------------------------------------------------------- * BORDERS * ------------------------------------------------------------------ */ --kfl-color-border: #D9DDE1; --kfl-color-border-strong: #B9C0C7; --kfl-color-border-focus: var(--kfl-color-brand-primary); /* --------------------------------------------------------------------- * STATE * ------------------------------------------------------------------ */ --kfl-color-success: #218739; /* icons, fills, large text */ --kfl-color-success-text:#1B6E2F; /* small text on white/subtle: 5.8:1 (AA) */ --kfl-color-success-bg: #E9F5EC; --kfl-color-warning: #9A6700; --kfl-color-warning-bg: #FFF6E5; --kfl-color-danger: #B3261E; --kfl-color-danger-bg: #FDECEB; --kfl-color-info: var(--kfl-color-brand-secondary); --kfl-color-info-bg: var(--kfl-color-surface-subtle); /* Sale / promotional state. Uses the brand red — in German retail the * price reduction and the brand signal are intentionally the same colour. */ --kfl-color-sale: var(--kfl-color-brand-primary); --kfl-color-sale-bg: #FCEAED; --kfl-color-sale-on: #FFFFFF; /* Price hierarchy: current price is the loudest element on a product card. */ --kfl-color-price: var(--kfl-color-text-primary); --kfl-color-price-sale: var(--kfl-color-brand-primary); --kfl-color-price-old: var(--kfl-color-text-muted); /* --------------------------------------------------------------------- * LAYOUT * ------------------------------------------------------------------ */ --kfl-container-max: 1400px; --kfl-container-gutter: 16px; --kfl-topbar-height: 36px; --kfl-header-row-1: 64px; /* logo / nav / account row */ --kfl-header-row-2: 56px; /* Alle Kategorien + search row */ --kfl-header-height-mobile:56px; --kfl-search-height: 44px; --kfl-search-height-mobile:40px; --kfl-search-max: 720px; /* keeps the search dominant, not endless */ /* --------------------------------------------------------------------- * SPACING — 4px base, deliberately compact for a dense catalogue * ------------------------------------------------------------------ */ --kfl-space-0: 0; --kfl-space-1: 4px; --kfl-space-2: 8px; --kfl-space-3: 12px; --kfl-space-4: 16px; --kfl-space-5: 20px; --kfl-space-6: 24px; --kfl-space-8: 32px; --kfl-space-10: 40px; --kfl-space-12: 48px; --kfl-space-16: 64px; /* --------------------------------------------------------------------- * RADIUS — intentionally small. Functional retail, not a rounded * lifestyle theme. Nothing above --kfl-radius-lg is used on chrome. * ------------------------------------------------------------------ */ --kfl-radius-none: 0; --kfl-radius-sm: 2px; --kfl-radius-md: 4px; --kfl-radius-lg: 8px; --kfl-radius-pill: 999px; /* --------------------------------------------------------------------- * CONTROLS * ------------------------------------------------------------------ */ --kfl-btn-height-sm: 32px; --kfl-btn-height: 40px; --kfl-btn-height-lg: 48px; --kfl-btn-padding-x: var(--kfl-space-4); --kfl-input-height: var(--kfl-btn-height); --kfl-border-width: 1px; /* Focus ring — one definition, used by every interactive element. */ --kfl-focus-ring: 0 0 0 2px var(--kfl-color-surface), 0 0 0 4px var(--kfl-color-brand-primary); /* --------------------------------------------------------------------- * TYPOGRAPHY * * Font families stay WoodMart's (Lato body / Montserrat headings) — there * was no reason to change them and doing so would mean re-tuning every * WoodMart component. Only the SIZE hierarchy is normalised here, and it * is deliberately compact: no editorial-scale headings on a catalogue. * ------------------------------------------------------------------ */ --kfl-font-size-xs: 11px; /* legal, micro-labels */ --kfl-font-size-sm: 12px; /* metadata, shipping, delivery */ --kfl-font-size-base: 14px; /* body */ --kfl-font-size-md: 15px; /* nav, inputs */ --kfl-font-size-lg: 17px; /* H3 */ --kfl-font-size-xl: 20px; /* H2 */ --kfl-font-size-2xl: 24px; /* H1 */ --kfl-font-size-3xl: 28px; /* reserved: hero / price emphasis */ --kfl-line-height-tight: 1.2; --kfl-line-height-snug: 1.35; --kfl-line-height-base: 1.5; --kfl-font-weight-normal: 400; --kfl-font-weight-medium: 500; --kfl-font-weight-semibold: 600; --kfl-font-weight-bold: 700; /* --------------------------------------------------------------------- * ELEVATION — used sparingly; flat surfaces read as more functional. * Dropdowns get one shadow, nothing else does. * ------------------------------------------------------------------ */ --kfl-shadow-sm: 0 1px 2px rgba(31, 41, 51, .08); --kfl-shadow-md: 0 2px 8px rgba(31, 41, 51, .10); --kfl-shadow-lg: 0 8px 24px rgba(31, 41, 51, .12); /* --------------------------------------------------------------------- * Z-INDEX — above WoodMart's chrome, below its modal range (9999+). * ------------------------------------------------------------------ */ --kfl-z-sticky-header: 390; --kfl-z-dropdown: 400; --kfl-z-overlay: 450; } /** * ----------------------------------------------------------------------------- * WOODMART VARIABLE BRIDGE * ----------------------------------------------------------------------------- * WoodMart drives its container width, form height and form radius from its own * custom properties. Feeding our tokens into those variables changes the theme * globally without overriding a single WoodMart selector — no specificity war, * no `!important`, and WoodMart's grid maths keeps working because it still * reads the variable it expects. * * Keep this list short. A --wd-* override belongs here only when it is the * cleanest way to reach a global value. * * `html:root` rather than `:root`: WoodMart emits its own :root block from a * generated stylesheet, and a plain :root here would be a specificity tie * decided by load order. Adding the element selector wins deterministically * without `!important`. */ html:root { /* Storefront container: WoodMart shipped 1222px; retail catalogues need * the extra columns. 1400px is inside the 1360–1440 target. */ --wd-container-w: var(--kfl-container-max); /* Inputs and selects across the whole theme, search bar included. */ --wd-form-height: var(--kfl-input-height); --wd-form-brd-width: var(--kfl-border-width); --wd-form-brd-radius: var(--kfl-radius-md); /* Global corner radius for WoodMart chrome. */ --wd-brd-radius: var(--kfl-radius-md); }