/* ==========================================================================
   variables.css — design tokens
   Values measured from the reference site (computed styles + its own CSS).
   Every other stylesheet must read from these tokens, never hard-code values.
   ========================================================================== */

:root {
  /* ---- Colors ---------------------------------------------------------- */
  --color-brand: #c72931;          /* buttons, prices, accents */
  --color-brand-dark: #b00614;     /* hover / pressed */
  --color-link: #208097;           /* text links, teal accents */
  --color-link-dark: #175c6d;      /* link hover */
  --color-success: #23ac7a;        /* "below average" figures, checks */

  --color-text: #333333;           /* body copy, headings */
  --color-text-strong: #1a1a1a;
  --color-text-muted: #666666;
  --color-text-light: #999999;     /* placeholders (decorative use only) */

  --color-bg: #f8f8f8;             /* page background */
  --color-surface: #ffffff;        /* cards, header, inputs */
  --color-surface-alt: #f2f2f2;    /* panels, title bands */
  --color-border: #d9d9d9;         /* cards, inputs */
  --color-divider: #dedede;
  --color-border-light: #f0f0f0;   /* header utility row separators */

  --color-white: #ffffff;
  --color-brand-light: #ff5a63;    /* brand red lightened for contrast on black */
  --color-focus-ring: rgba(32, 128, 151, 0.3);
  --color-rule-on-dark: rgba(255, 255, 255, 0.35);
  --color-on-dark: #f7f7f7;        /* text on the dark footer */
  --color-footer-top: #1a1a1a;     /* footer gradient start */
  --color-footer-bottom: #0a0a0a;  /* footer gradient end */
  --color-overlay: rgba(0, 0, 0, 0.6);

  /* ---- Typography ------------------------------------------------------ */
  --font-heading: "Montserrat", sans-serif;
  --font-body: "Open Sans", Helvetica, Arial, sans-serif;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-black: 900;

  /* Type scale (px values observed on the reference) */
  --fs-2xs: 11.5px;   /* accordion buttons */
  --fs-xs: 12px;      /* utility nav, dealer line, small links */
  --fs-sm: 13px;      /* filter labels, buttons */
  --fs-base: 14px;    /* body */
  --fs-md: 16px;      /* trim line, inputs, hero button */
  --fs-lg: 18px;      /* card title */
  --fs-xl: 24px;      /* card price, detail H1 */
  --fs-2xl: 30px;     /* section titles */
  --fs-hero: 70px;    /* home hero heading */

  --lh-base: 20px;
  --lh-heading: 1.1;  /* 33px at 30px */

  /* ---- Spacing scale --------------------------------------------------- */
  --space-1: 5px;
  --space-2: 10px;
  --space-3: 15px;
  --space-4: 25px;
  --space-5: 45px;    /* section padding */

  /* ---- Shape ----------------------------------------------------------- */
  --radius-sm: 3px;   /* inputs, primary buttons */
  --radius-md: 4px;   /* buttons, hero badge */
  --radius-pill: 999px;

  /* ---- Elevation ------------------------------------------------------- */
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --shadow-md: 0 3px 4px -2px rgba(0, 0, 0, 0.07);
  --shadow-menu: 0 6px 16px rgba(0, 0, 0, 0.15);
  --shadow-top: 0 -2px 8px rgba(0, 0, 0, 0.15);
  --shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.15);

  /* ---- Component sizing ------------------------------------------------ */
  --ratio-card-image: 3 / 2;     /* listing card image (376 x 250 on the reference) */
  --ratio-gallery: 4 / 3;        /* vehicle gallery main image */
  --sidebar-width: 270px;
  --control-height: 44px;
  --color-band-start: #dedede;   /* grey title band gradient */
  --color-band-end: #f2f2f2;
  --color-glass: rgba(255, 255, 255, 0.72);   /* translucent hero search panel */
  --color-glass-on-brand: rgba(255, 255, 255, 0.18);  /* chips on brand-coloured panels */
  --color-ink: #333333;          /* text on always-light surfaces (hero search fields) */
  --color-shade-strong: rgba(0, 0, 0, 0.6);  /* photo overlays */
  --color-shade-soft: rgba(0, 0, 0, 0.12);
  --radius-card: 0;              /* card corners (rounded by some home themes) */

  /* ---- Layout ---------------------------------------------------------- */
  --container-width: 1200px;   /* 1170px content + 2 x 15px gutters */
  --gutter: 15px;
  --header-height: 81px;       /* mobile; 89px from 650px up */

  /* ---- Motion ---------------------------------------------------------- */
  --transition: 0.2s ease;

  /* ---- Stacking -------------------------------------------------------- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-fixed: 200;
  --z-modal: 300;
}

@media (min-width: 650px) {
  :root {
    --header-height: 89px;
  }
}

/* ==========================================================================
   Themes — token overrides used by the home page variations (home-2..5).
   Add one class to <body>; header, footer and every component follow.
   ========================================================================== */

/* Home 2: dark and bold */
.theme-dark {
  --color-bg: #0e1013;
  --color-surface: #171a1f;
  --color-surface-alt: #20242a;
  --color-text: #eceff2;
  --color-text-strong: #ffffff;
  --color-text-muted: #a6adb6;
  --color-text-light: #7d8691;
  --color-border: #2c3138;
  --color-divider: #2c3138;
  --color-border-light: #252a30;
  --color-link: #52bfd6;
  --color-link-dark: #9bdbe9;
  --color-glass: rgba(20, 22, 26, 0.78);
  --color-overlay: rgba(0, 0, 0, 0.75);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5);
  --shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.6);
}

/* Home 3: warm editorial */
.theme-warm {
  --color-bg: #f6f1ea;
  --color-surface-alt: #efe7dc;
  --color-border: #e2d8ca;
  --color-divider: #e2d8ca;
  --color-border-light: #ece4d8;
  --color-text: #2b2622;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-card: 12px;
}

/* Home 4: cool slate marketplace */
.theme-slate {
  --color-bg: #eceff3;
  --color-surface-alt: #e1e6ec;
  --color-border: #d3d9e0;
  --color-divider: #d3d9e0;
  --color-border-light: #e3e8ee;
  --color-text: #232a31;
  --color-link: #1b6f86;
}

/* Home 5: airy teal */
.theme-teal {
  --color-brand: #1b7f95;
  --color-brand-dark: #14606f;
  --color-brand-light: #7fd3e6;
  --color-link: #14606f;
  --color-link-dark: #0e4854;
  --color-bg: #f1f8f9;
  --color-surface-alt: #e3f0f2;
  --color-border: #d0e3e7;
  --color-divider: #d0e3e7;
  --color-border-light: #e0eef1;
  --color-text: #1c2b30;
  --color-glass: rgba(255, 255, 255, 0.9);
  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-card: 18px;
}