/*
 * 01-tokens.css
 *
 * Brand tokens that map our design system (defined in mu-plugins/mcr/design-system.php)
 * onto Houzez-specific component variables. This is the shim that translates the
 * universal MCR palette into Houzez's existing CSS architecture.
 *
 * Pattern: redefine Houzez vars to point at our brand vars.
 */

/* ── Map Houzez vars to MCR vars where Houzez uses them ───────────── */
:root {
  /* Houzez primary brand color → our magenta (signature CTA) */
  --hz-color-primary:    var(--mcr-teal);
  --hz-color-primary-hover: var(--mcr-teal-deep);

  /* Houzez accent → our cyan (links, info badges) */
  --hz-color-accent:     var(--mcr-cyan);

  /* Houzez surface colors */
  --hz-color-bg:         var(--mcr-bg);
  --hz-color-card:       var(--mcr-bg-card);
  --hz-color-text:       var(--mcr-text);
  --hz-color-text-mute:  var(--mcr-text-mute);
  --hz-color-border:     var(--mcr-border);

  /* Typography handoff */
  --hz-font-display:     var(--mcr-font-display);
  --hz-font-body:        var(--mcr-font-body);
}

/* ── Houzez button overrides — Miami Tide sweep ─────────────── */
.btn.btn-primary,
.btn.btn-houzez,
.button.bg-primary,
button.btn-primary {
  background: var(--mcr-sunset) !important;
  border: none !important;
  color: #fff !important;
  transition: transform var(--mcr-dur) var(--mcr-ease), box-shadow var(--mcr-dur) var(--mcr-ease);
}
.btn.btn-primary:hover,
.btn.btn-houzez:hover {
  transform: translateY(-1px);
  box-shadow: var(--mcr-shadow-neon);
}

/* ── Link color (default + visited) ───────────────────────────────── */
a { color: var(--mcr-teal); }
a:hover { color: var(--mcr-teal-deep); }
a:visited { color: var(--mcr-teal); }

/* ── Selection highlight ──────────────────────────────────────────── */
::selection {
  background: var(--mcr-glow);
  color: #fff;
}

/* ── Price emphasis ───────────────────────────────────────────────── */
.item-price,
.listing-price,
.property-price,
.price {
  font-family: var(--mcr-font-display);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}