:root {
  /* TENANT: Gaucho Sport Horses — https://gauchosport-horses.com/en/
     Argentine sport-horse breeding & sales (family business "La Tatabra"),
     direct sales + online auctions at bid.gauchosport-horses.com.
     Brand cues used for this mapping: a minimal, premium one-page site with a
     dark wordmark/text on light (white/cream) backgrounds and full-bleed horse
     photography, plus the "gaucho" Argentine heritage (saddle leather, pampas,
     brass tack). The warm espresso + saddle-gold family below is a coherent
     best estimate from those cues — see the note at the bottom of this file
     for how to lock in the exact logo hex if you want pixel-perfect values.
  */

  /* 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 cream/parchment instead of pure white, to match the site's earthy, premium feel.
  */
  --background: oklch(98.5% 0.006 85);
  --foreground: oklch(26% 0.02 65);

  /* SURFACES
     Card is used for lots, auction cards, bidding panels and content sections.
  */
  --card: oklch(99.5% 0.004 85);
  --card-foreground: oklch(26% 0.02 65);

  /* POPOVER SURFACES
     Popover is used for dropdowns, menus, overlays and modal-like floating surfaces.
  */
  --popover: oklch(99.5% 0.004 85);
  --popover-foreground: oklch(26% 0.02 65);

  /* 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.
     -> Deep warm espresso near-black: the dark wordmark / text color, leather-toned rather than neutral.
        White on primary is essentially bulletproof (~13:1).
  */
  --primary: oklch(25% 0.022 65);
  --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.
     -> Neutrals are pulled a touch toward the warm brand hue so the whole UI reads as one family.
  */
  --secondary: oklch(96% 0.008 82);
  --secondary-foreground: oklch(25% 0.022 65);
  --muted: oklch(94% 0.008 82);
  --muted-foreground: oklch(50% 0.02 68);

  /* ACCENT (PRIMARY CALL-TO-ACTION)
     Accent is the main CTA fill (Register, place-bid, "Online Auctions" buttons).
     -> Saddle/brass gold, the natural warm "gaucho leather" highlight. Deepened to a bronze
        so white button text clears WCAG AA (~4.7:1). A brighter gold reads nicer but can't
        carry white small-text accessibly — see the note at the bottom if you prefer the brighter tone.
     Accent-soft = lighter gold for hovers and gentle fills; accent-strong = darker pressed state.
  */
  --accent: oklch(53% 0.105 70);
  --accent-foreground: oklch(100% 0 0);
  --accent-soft: oklch(68% 0.10 74);
  --accent-strong: oklch(46% 0.10 66);

  /* ACCENT-ALT (SECONDARY / HERALDIC EMPHASIS)
     -> Deep oxblood / bordeaux leather as a warm counterpoint to the gold (a classic
        equestrian pairing). Editorial pick — swap if the brand defines its own secondary tone.
  */
  --accent-alt: oklch(40% 0.12 28);
  --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: brand accent is a bronze-gold, so --warning is nudged a hair more yellow (hue 85)
     and stays much lighter than the accent, keeping "caution" 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 85);
  --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 82);
  --input: oklch(89% 0.01 82);
  --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 is a WordPress/Divi build and doesn't expose a readable stylesheet,
     so the espresso + saddle-gold family above is read from the brand's visual
     identity rather than a measured hex. If you have the brand's exact colors
     (e.g. the logo hex), set --primary to it and derive --accent from it:
       - if the brand color is dark  -> keep it as --primary, use a brighter same-hue gold for --accent
       - if the brand color is mid   -> use it as --accent, darken slightly for AA, deepen for --primary
     Then re-check white-on-accent contrast (target >= 4.5:1).
     ---------------------------------------------------------------------- */
}
