:root {
  /* TENANT: Veulenveiling Midden-Nederland / Dutch Top Foals (https://www.topveulens.nl/)
     Dutch foal auction (24th edition, Sept 2026, Lunteren). Custom WordPress theme; auction on
     auction.topveulens.nl. Light theme with an orange button accent.
     Confirmed surfaces: site background #F1F1F1; nav bar / cards #FFFFFF; buttons #FFA12F (orange);
     text #222222. Orange = oklch(78.71% 0.162 65.3).
  */

  /* 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 — no tenant font was supplied; swap 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.
     -> Background is the confirmed site grey #F1F1F1; foreground is the confirmed text colour #222222.
  */
  --background: oklch(95.81% 0 0);
  --foreground: oklch(25.2% 0 0);

  /* SURFACES
     Card is used for lots, auction cards, bidding panels and content sections.
     -> White #FFFFFF — the same white as the navigation bar, sitting on the grey background.
  */
  --card: oklch(100% 0 0);
  --card-foreground: oklch(25.2% 0 0);

  /* POPOVER SURFACES
     Popover is used for dropdowns, menus, overlays and modal-like floating surfaces.
  */
  --popover: oklch(100% 0 0);
  --popover-foreground: oklch(25.2% 0 0);

  /* 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.
     Primary foreground must stay readable on top of primary.
     -> Set to the site's dark UI/text tone (~#222). The brand uses orange strictly on buttons, so orange
        lives on --accent and --primary stays a neutral dark for badges/outline/selected/hero-tint.
  */
  --primary: oklch(26% 0.01 60);
  --primary-foreground: oklch(100% 0 0);

  /* SECONDARY SURFACES
     Secondary is used for subtle backgrounds, inactive controls and low-emphasis panels
     (for example: soft section backgrounds or neutral chips).
     Use secondary when you need more emphasis than muted, but less emphasis than primary/accent surfaces.
     Secondary foreground is the readable text/icon color on secondary.
  */
  --secondary: oklch(90% 0.006 65);
  --secondary-foreground: oklch(30% 0.01 60);

  /* MUTED UI
     Muted is used for subdued backgrounds and separators.
     Muted foreground is used for helper text, metadata, dates, labels and less important copy.
  */
  --muted: oklch(93% 0.004 65);
  --muted-foreground: oklch(50% 0.01 60);

  /* ACCENT COLORS
     Accent is the main call-to-action/highlight color for buttons, links, active states and auction emphasis.
     Accent foreground must stay readable on accent buttons and badges.
     Accent soft is a lighter accent for hover states, subtle highlights and gentle backgrounds.
     Accent strong is a darker accent for pressed states, emphasis and high-contrast details.
     -> Exact brand orange #FFA12F. It is light, so --accent-foreground is DARK (Stal Tops rule): white
        text on this orange is only 2.02:1 (fails AA) whereas dark text is 7.87:1. (The marketing site /
        cookie banner use white-on-orange; if you must match that exactly, set --accent-foreground to
        white, but note it fails WCAG AA.)
  */
  --accent: oklch(78.71% 0.162 65.3);
  --accent-foreground: oklch(25% 0 0);
  --accent-soft: oklch(85% 0.10 65);
  --accent-strong: oklch(58% 0.17 65);

  /* ALTERNATIVE ACCENT
     Accent alt is a secondary brand tone, often used for luxury, contrast or special emphasis.
     Accent alt foreground must stay readable on accent-alt backgrounds.
     -> Editorial: a deep teal as a complementary counterpoint to the orange (orange + teal is a clean,
        modern pairing). Not a confirmed brand colour — change or remove if the brand is orange-only.
  */
  --accent-alt: oklch(45% 0.08 235);
  --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: since the accent is orange, --warning is shifted toward a yellow-gold (hue ~95) so it stays
     distinct from the orange accent. Destructive (red) is far enough from orange to stay at default.
  */
  --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(80% 0.14 95);
  --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(88% 0.004 65);
  --input: oklch(88% 0.004 65);
  --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;
}

/* ---------------------------------------------------------------------------
   NOTES
   - Confirmed from the client: --background #F1F1F1, white nav/cards (--card), buttons #FFA12F
     (--accent), text #222222 (--foreground).
   - --accent-foreground is DARK for accessibility (Stal Tops rule). Their site uses white-on-orange,
     which fails AA — switch --accent-foreground to white only if an exact visual match is required.
   - HEADER: the white nav bar is represented by --card. If the auction platform paints its top bar
     from --primary (which is dark here), the platform header will render dark rather than white. If it
     needs to be white to match the marketing nav, that's a small header override (same pattern as the
     esiauction header tweak) — ask and I'll provide it.
   - --accent-alt (teal) and the --warning hue shift are editorial; adjust if the brand is orange-only.
   --------------------------------------------------------------------------- */