/* TENANT: DQHA – Deutsche Quarter Horse Association e.V.  (dqha.de)
   --primary is gold #BA9C6A, confirmed by the client (replaces the logo red as
   primary). Gold is too light for white text, so per the Stal Tops rule it keeps
   its true value with an ink (#1B1B1B) foreground.
   The logo red #E20614 (the "Q" mark, the only colour in the logo SVG) stays as
   --accent for CTAs. Colours from the official logo SVG and the live site CSS
   (TYPO3, "razorsite" theme on Bootstrap 5). The site's theme primary #1B1B1B
   (ink) is used as --foreground. The theme's custom navy #01427F (btn-secondary / links) maps
   to --accent-alt, and the warm sand #EAE1D2 used for menu and jumbotron panels
   tints the --secondary surface. Bootstrap defaults (#0d6efd, #dc3545 etc.) are
   intentionally NOT used.
   Fonts are Adobe Fonts (Typekit kit pug4ynh, domain-locked to dqha.de):
   nimbus-sans (body) and ff-good-headline-web-pro (display). The platform needs
   its own Adobe Fonts kit with these two faces; until then the system fallbacks render.
   Functional colours are editorial platform tunings: red accent → --destructive
   shifted to orange-scarlet; navy accent-alt → --info shifted to teal; gold
   primary → --warning shifted from amber to orange. */

:root {
  /* 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.
  */
  --font-body: 'nimbus-sans', 'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-display: 'ff-good-headline-web-pro', 'Arial Narrow', 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: oklch(99% 0.003 80); /* near-white, faint warm tint */
  --foreground: oklch(22.2% 0 0); /* #1B1B1B DQHA ink (site body colour) */

  /* SURFACES
     Card is used for lots, auction cards, bidding panels and content sections.
  */
  --card: oklch(100% 0 0);
  --card-foreground: oklch(22.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(22.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.
  */
  --primary: oklch(70.8% 0.076 79.8); /* #BA9C6A DQHA gold (client-confirmed) — dark text (Stal Tops rule) */
  --primary-foreground: oklch(22.2% 0 0); /* #1B1B1B ink on gold (6.6:1); white fails at 2.6:1 */

  /* 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(93% 0.018 80); /* light tint of site sand #EAE1D2 */
  --secondary-foreground: oklch(22.2% 0 0); /* ink on sand (14.0:1) */

  /* 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(96.5% 0.006 80);
  --muted-foreground: oklch(50% 0.01 60); /* warm grey (6.0:1 on white) */

  /* 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.
  */
  --accent: oklch(57.5% 0.233 27.8); /* #E20614 DQHA red — CTA (white 4.9:1) */
  --accent-foreground: oklch(100% 0 0);
  --accent-soft: oklch(93% 0.04 20); /* pale rose (family of site hover #F08289) — ink text 13.7:1 */
  --accent-strong: oklch(47% 0.19 27); /* deep red — pressed/high-contrast, white text 7.5:1 */

  /* 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.
  */
  --accent-alt: oklch(38.1% 0.118 253.5); /* #01427F DQHA theme navy */
  --accent-alt-foreground: oklch(100% 0 0); /* white on navy (10.1:1) */

  /* 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.
  */
  --destructive: oklch(58% 0.19 38); /* orange-scarlet — shifted off the red brand (white 4.7:1) */
  --destructive-foreground: oklch(100% 0 0);
  --success: oklch(54% 0.14 150); /* green (white 4.8:1) */
  --success-foreground: oklch(100% 0 0);
  --info: oklch(54% 0.10 212); /* teal — shifted off the navy accent-alt (white 4.8:1) */
  --info-foreground: oklch(100% 0 0);
  --warning: oklch(72% 0.16 58); /* orange — shifted off the gold primary (dark text 6.6:1) */
  --warning-foreground: oklch(22.2% 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(90% 0.008 80);
  --input: oklch(90% 0.008 80);
  --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.375rem; /* matches the site's Bootstrap --bs-border-radius */
}