:root { /* TENANT: Excellent Dressage Sales — https://excellentdressagesales.com/en/ Premium Dutch auction for talented young & Grand Prix dressage horses (Hooge Mierde, NL; "bartels-events" platform). Tagline: "the pursuit of perfection". CONFIRMED brand primary: #3F3432 — a warm taupe / charcoal-brown. The neutral family below is warmed to harmonise with that primary; the champagne-gold accent is still an editorial pick (see bottom note to set the exact accent). */ /* 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. -> Warm near-white, tinted toward the taupe primary so the page reads as one warm family. */ --background: oklch(98.5% 0.004 48); --foreground: oklch(31% 0.014 33); /* SURFACES Card is used for lots, auction cards, bidding panels and content sections. */ --card: oklch(99.5% 0.003 48); --card-foreground: oklch(31% 0.014 33); /* POPOVER SURFACES Popover is used for dropdowns, menus, overlays and modal-like floating surfaces. */ --popover: oklch(99.5% 0.003 48); --popover-foreground: oklch(31% 0.014 33); /* 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. -> CONFIRMED exact brand color #3F3432 (warm taupe / charcoal-brown). White on primary is essentially bulletproof (~12:1). */ --primary: oklch(34% 0.016 33); /* #3F3432 */ --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. -> Warm taupe-greys (low chroma, same hue family as the primary), so neutrals read warm not cool. */ --secondary: oklch(96% 0.006 45); --secondary-foreground: oklch(34% 0.016 33); --muted: oklch(94% 0.006 45); --muted-foreground: oklch(50% 0.012 38); /* ACCENT (PRIMARY CALL-TO-ACTION) Accent is the main CTA fill (Register, place-bid, newsletter sign-up buttons). -> Refined champagne / antique gold — the natural "prestige / pursuit of perfection" highlight, and a classic pairing with a warm taupe-brown. Deepened so white button text clears WCAG AA (~4.7:1); a brighter gold reads more luxe but can't carry white small-text accessibly. STILL AN ESTIMATE — send the brand's accent hex to lock it in (see bottom note). Accent-soft = lighter champagne for hovers / gentle fills; accent-strong = darker pressed state. */ --accent: oklch(53% 0.085 84); --accent-foreground: oklch(100% 0 0); --accent-soft: oklch(70% 0.08 86); --accent-strong: oklch(46% 0.08 80); /* ACCENT-ALT (SECONDARY / HERALDIC EMPHASIS) -> Deep bordeaux / wine as a classic dressage counterpoint to the gold. Editorial pick — if the brand's signature is actually bordeaux (or navy), promote this to --accent instead. */ --accent-alt: oklch(38% 0.11 22); --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: --warning stays a bright, saturated amber; it's far lighter and more saturated than the muted champagne accent, so "caution" reads clearly distinct from the brand color. */ --destructive: oklch(55% 0.2 25); --destructive-foreground: oklch(100% 0 0); --success: oklch(64% 0.16 152); --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.5% 0.008 45); --input: oklch(89.5% 0.008 45); --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; /* ---------------------------------------------------------------------- STATUS OF THIS FILE --primary is now the confirmed exact brand color (#3F3432) and the neutrals are warmed to match it. The only remaining estimate is --accent (champagne gold). To lock the accent: send the brand's CTA/highlight hex. - if it's a gold/tan -> set --accent to it (darken slightly if white text needs AA >= 4.5:1) - if it's bordeaux or navy -> promote --accent-alt to --accent ---------------------------------------------------------------------- */ }