/**
 * JLR Retrofit — Design Tokens (CSS Custom Properties)
 * Source of truth: logo-final/brand-colors.md (extracted from logo-black-1024.png)
 * Usage: @import or copy into your stylesheet; reference via var(--jr-*)
 */

:root {
  /* ---- Primary ---- */
  --jr-obsidian: #0D0D0D;        /* brand background (measured logo bg #010101) */
  --jr-gold: #D4AF37;            /* champagne gold, brand accent */

  /* ---- Secondary ---- */
  --jr-warm-white: #F8F8F8;      /* headings & wordmark on dark */
  --jr-gold-dim: #9A7F2E;        /* borders, hover transitions */
  --jr-gold-highlight: #E8B868;  /* measured line highlight — hover/glow states */
  --jr-card: #161613;            /* content cards on dark bg */
  --jr-line: #262620;            /* hairline dividers & borders */
  --jr-muted: #9B968B;           /* secondary body text */

  /* ---- Semantic mapping ---- */
  --jr-bg: var(--jr-obsidian);
  --jr-surface: var(--jr-card);
  --jr-text: var(--jr-warm-white);
  --jr-text-muted: var(--jr-muted);
  --jr-accent: var(--jr-gold);
  --jr-accent-hover: var(--jr-gold-highlight);
  --jr-border: var(--jr-line);
  --jr-border-accent: var(--jr-gold-dim);

  /* ---- Typography ---- */
  --jr-font-sans: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --jr-tracking-wide: 0.06em;    /* buttons, kickers */
  --jr-tracking-kicker: 0.25em;  /* uppercase micro-labels */

  /* ---- Shape ---- */
  --jr-radius-sm: 2px;           /* buttons */
  --jr-radius-md: 4px;           /* cards */
  --jr-radius-lg: 6px;           /* VIN panel */
  --jr-radius-pill: 20px;        /* related-link chips */

  /* ---- Spacing rhythm ---- */
  --jr-space-section: 44px;      /* vertical section padding */
  --jr-space-gutter: 24px;       /* page gutter */
  --jr-maxw: 1080px;             /* content max width */
}



/* ---- Button Styles ---- */
.btn, button, input[type="submit"] {
  --btn-bg: var(--jr-gold);
  --btn-border: var(--jr-gold);
  --btn-color: var(--jr-obsidian);
  background-color: var(--btn-bg);
  border-color: var(--btn-border);
  color: var(--btn-color);
}
.btn:hover, button:hover, input[type="submit"]:hover {
  --btn-bg: var(--jr-gold-highlight);
  --btn-border: var(--jr-gold-dim);
}
.btn-primary {
  --btn-bg: var(--jr-gold);
  --btn-border: var(--jr-gold);
  --btn-color: var(--jr-obsidian);
}
.btn-primary:hover {
  --btn-bg: var(--jr-gold-highlight);
  --btn-border: var(--jr-gold-dim);
}
.btn-secondary, .btn-success, .btn-info, .btn-warning {
  --btn-bg: var(--jr-gold);
  --btn-border: var(--jr-gold);
  --btn-color: var(--jr-obsidian);
}
.btn-secondary:hover, .btn-success:hover, .btn-info:hover, .btn-warning:hover {
  --btn-bg: var(--jr-gold-highlight);
  --btn-border: var(--jr-gold-dim);
}
/* ---- Usage constraints (from brand-colors.md) ----
 * - Gold is an accent only: keep below ~10% of any view.
 * - Never use warm-white text on light backgrounds.
 * - Never use white text on a gold background (contrast fail).
 */