:root {
  /* TENANT: Stal Tops — https://staltops.com/en
     Jan Tops' world-renowned show-jumping stud & breeder in Valkenswaard, NL
     (the Global Champions / Tops International Arena world; stallions Bacardi VDL,
     Cinsey, Horizontal). Premium, modern, dark-and-elegant identity.
     CONFIRMED brand colors: primary #0D0231 (near-black deep indigo/violet) +
     secondary #FF7E5F (warm coral). Neutrals are tinted toward the indigo; the coral
     secondary is mapped to --accent (the CTA/highlight role — where a brand's vivid
     secondary colour drives the UI, while the dark indigo carries chrome/headers).
     NOTE: coral is light, so --accent-foreground is the deep indigo (not white) to keep
     #FF7E5F exact while clearing WCAG AA (~7:1). If "secondary" was meant for the quiet
     neutral chip/secondary-button fill (--secondary) instead, it's a one-line move.
  */

  /* 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 indigo whisper, so the page reads as one family with the deep-violet brand.
  */
  --background: oklch(99% 0.004 290);
  --foreground: oklch(24% 0.035 286);

  /* SURFACES
     Card is used for lots, auction cards, bidding panels and content sections.
  */
  --card: oklch(100% 0 0);
  --card-foreground: oklch(24% 0.035 286);

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

  /* 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 #0D0231 (near-black deep indigo / violet).
        White on primary is essentially bulletproof (~16:1).
  */
  --primary: oklch(16.3% 0.088 284); /* #0D0231 */
  --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.
     -> Cool greys with a faint indigo tint (same hue family as the primary).
  */
  --secondary: oklch(96.5% 0.006 288);
  --secondary-foreground: oklch(24% 0.04 286);
  --muted: oklch(94% 0.006 288);
  --muted-foreground: oklch(50% 0.02 286);

  /* ACCENT (PRIMARY CALL-TO-ACTION)
     Accent is the main CTA fill (Discover the stallions, Register, place-bid buttons).
     -> CONFIRMED brand secondary colour #FF7E5F (warm coral). Because coral is light,
        --accent-foreground is the deep indigo brand colour rather than white (~7:1 on coral),
        which keeps #FF7E5F exact AND ties the two brand colours together on every button.
     Accent-soft = pale coral wash for hovers / gentle fills (use with a dark foreground);
     accent-strong = deeper coral for pressed states and for accent-coloured text on light.
  */
  --accent: oklch(73.6% 0.164 35); /* #FF7E5F */
  --accent-foreground: oklch(20% 0.04 286);
  --accent-soft: oklch(83% 0.085 40);
  --accent-strong: oklch(60% 0.185 33);

  /* ACCENT-ALT (SECONDARY / HERALDIC EMPHASIS)
     -> Teal as a clean complementary counterpoint to the coral (and distinct from the
        indigo primary). Editorial pick — replace if the brand defines a third tone.
  */
  --accent-alt: oklch(50% 0.10 200);
  --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 accent is a warm coral; --destructive stays its default red, which is darker
     and more saturated than the coral so error/live states still read distinctly. The default
     functional blue --info no longer clashes (accent is no longer blue) and is kept as-is.
  */
  --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; set to the deeper coral (accent-strong) so the
     focus indicator stays visible on light backgrounds (the base coral is too light for that).
  */
  --border: oklch(90% 0.007 288);
  --input: oklch(90% 0.007 288);
  --ring: oklch(60% 0.185 33);

  /* 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
     Both brand colours are now confirmed and exact:
       --primary  #0D0231 (deep indigo)  -> chrome / headers / overlays
       --accent   #FF7E5F (coral)        -> CTAs / highlights (dark indigo text on it)
     Neutrals are tinted to the indigo; accent-soft/strong and the focus ring are derived
     from the coral. If you later want the coral used as a quiet secondary-button fill instead
     of the primary CTA colour, move #FF7E5F to --secondary and pick a CTA colour for --accent.
     ---------------------------------------------------------------------- */
}