:root { /* TENANT: PZHK — Polski Związek Hodowców Koni (Polish Horse Breeders' Association) https://www.pzhk.pl/ — national breeders' association (studbooks, stallion registers, championships, welfare). Institutional, heritage feel; horse emblem in a brand green. Brand cues used: a green visual identity on light/white backgrounds. The forest-green primary + gold accent below are a VISUAL ESTIMATE (the site exposes no readable stylesheet) — send the exact brand hex(es) to lock them, as with the EDS/Stal Tops tenants. */ /* BRAND ADAPTATION GUIDE 1. Analyse the target tenant website, logo and existing brand palette first. 2. Map the strongest brand color to --primary. 3. Map the main call-to-action / highlight color to --accent. 4. Keep backgrounds light unless the tenant website is clearly dark. 5. Use --accent-soft and --accent-strong as lighter/darker versions of --accent. 6. Keep status colors functional unless the tenant brand clearly overrides them. 7. Always check contrast for foreground variables against their matching background variables. */ /* TYPOGRAPHY Body is used for regular UI text. Display is used for headings, auction titles, hero titles and prominent prices. (Kept as Outfit — swap to the tenant's actual webfont if you have it.) */ --font-body: 'Outfit', system-ui, sans-serif; --font-display: 'Outfit', system-ui, sans-serif; /* ELEVATION Card shadow is used for auction cards, lot cards, panels and elevated content blocks. */ --shadow-card: 0 4px 12px oklch(0% 0 0 / 0.08); /* BASE COLORS Background is the base surface behind content. Foreground is the default content-layer color (text, icons and similar elements) on top of background surfaces. -> Near-white with the faintest green whisper, to sit under the green brand. */ --background: oklch(99% 0.004 150); --foreground: oklch(28% 0.02 150); /* SURFACES Card is used for lots, auction cards, bidding panels and content sections. */ --card: oklch(100% 0 0); --card-foreground: oklch(28% 0.02 150); /* POPOVER SURFACES Popover is used for dropdowns, menus, overlays and modal-like floating surfaces. */ --popover: oklch(100% 0 0); --popover-foreground: oklch(28% 0.02 150); /* BRAND COLORS Primary is used for hero overlay tint, default badges, outline buttons and selected pagination states. It should represent the strongest/base brand tone, but most call-to-action buttons use --accent. -> Forest/association green (VISUAL ESTIMATE). White on primary ~5:1. If the real brand green is brighter/darker, replace this one line and re-check white-on-primary >= 4.5:1. */ --primary: oklch(46% 0.105 150); --primary-foreground: oklch(100% 0 0); /* SECONDARY / MUTED Secondary is used for quiet fills, chips and secondary buttons. Muted is used for subtle backgrounds; muted-foreground for secondary/help text. -> Quiet green-greys (same hue family as the primary) so the UI reads as one calm family. */ --secondary: oklch(96% 0.008 150); --secondary-foreground: oklch(40% 0.09 150); --muted: oklch(94% 0.008 150); --muted-foreground: oklch(48% 0.02 150); /* ACCENT (PRIMARY CALL-TO-ACTION) Accent is the main CTA fill (Register, place-bid, newsletter sign-up buttons). -> Warm gold, a classic heritage counterpoint to the brand green. Deepened so white button text clears WCAG AA (~4.7:1). ESTIMATE — send the brand's exact CTA/highlight hex to lock it. Accent-soft = lighter gold for hovers / gentle fills; accent-strong = darker pressed state. */ --accent: oklch(54% 0.105 80); --accent-foreground: oklch(100% 0 0); --accent-soft: oklch(70% 0.10 84); --accent-strong: oklch(46% 0.10 76); /* ACCENT-ALT (SECONDARY / HERALDIC EMPHASIS) -> Earthy terracotta as a warm secondary tone alongside green + gold. Editorial pick — replace if the brand defines its own secondary tone. */ --accent-alt: oklch(50% 0.13 48); --accent-alt-foreground: oklch(100% 0 0); /* FUNCTIONAL FEEDBACK COLORS Destructive is used for danger, errors, removal actions and urgent/live warning surfaces. Success is used for positive states such as active/accepted/highest bidder feedback. Info is used for informative states such as upcoming auctions. Warning is used for cautionary states that need attention but are not errors. NOTE: the brand primary is green, so --success is shifted from the default green (hue 152) toward emerald (hue 162) and kept brighter than the primary, so "active" status stays distinct from the green brand chrome. Other statuses left functional. */ --destructive: oklch(55% 0.2 25); --destructive-foreground: oklch(100% 0 0); --success: oklch(64% 0.15 162); --success-foreground: oklch(100% 0 0); --info: oklch(62% 0.17 255); --info-foreground: oklch(100% 0 0); --warning: oklch(74% 0.16 80); --warning-foreground: oklch(20% 0 0); /* FORM AND FOCUS COLORS Border is used for cards, section dividers and outlined controls. Input is used for form fields and input borders. Ring is used for keyboard focus rings and should usually match --accent. */ --border: oklch(89% 0.01 150); --input: oklch(89% 0.01 150); --ring: var(--accent); /* AUCTION STATUS COLORS Live should feel urgent and attention-grabbing. Active should feel positive/safe. Upcoming should feel informative. These usually remain functional colors, even when brand colors change. */ --status-live: var(--destructive); --status-active: var(--success); --status-upcoming: var(--info); /* SHAPE Radius controls the default roundness of cards, buttons, inputs and badges. */ --radius: 0.5rem; /* ---------------------------------------------------------------------- LOCKING IN EXACT BRAND VALUES The site exposes no readable stylesheet, so --primary (green) and --accent (gold) are read from the brand's visual identity, not measured hex. To lock them in: - set --primary to the exact brand-green hex (re-check white-on-primary >= 4.5:1) - set --accent to the exact CTA/highlight hex (darken slightly for AA if needed) Because the brand is green, --success was shifted to emerald; if you change the brand hue you can revert --success to the default oklch(64% 0.16 152). ---------------------------------------------------------------------- */ }