/**
 * PlaidCars — brand BASE layer  (Master Plan v3 §4.5)
 * CR-BRAND-IDENTITY-ROLLOUT — BR-1 (typography application).
 *
 * brand-tokens.css DEFINES the type tokens; this file APPLIES them site-wide.
 * Kept separate so tokens stay pure :root (one source of truth) and this layer
 * can load LATE (after Astra's dynamic CSS) and win the body/heading cascade
 * WITHOUT !important. Reversible: drop the enqueue to revert to Astra's type.
 *
 * §4.5 rule encoded here:
 *   • Display + body  → Saira (var(--pc-font-display) / --pc-font-body)
 *   • NUMBERS ALWAYS  → Saira Semi Condensed (var(--pc-font-num)) — every figure:
 *     prices, rates, deal scores, plate codes, mileage, km, counts.
 * The tokens carry a full system fallback, so this is safe before the CDN faces
 * load (no FOIT; swap-in is a repaint, not a reflow, given Saira's near-system metrics).
 */

/* ---- Display + body type ----------------------------------------------------
   Match Astra's own body normalize set for equal specificity; loading later in
   the cascade makes the brand font win. */
body,
button, input, select, optgroup, textarea {
    font-family: var(--pc-font-body);
}

h1, h2, h3, h4, h5, h6,
.site-title, .ast-site-title, .entry-title, .ast-single-entry-banner,
.widget-title, .wp-block-heading {
    font-family: var(--pc-font-display);
}

/* ---- Numerals — every figure surface is Saira Semi Condensed (§4.5) ---------
   Confirmed real selectors across buy (uae-system / plaidcars-cars) + rent.
   .pc-num is the canonical numeric utility; the rest are the figure-bearing
   components (plate number zone, price/km spec cells, deal badge, rent plate). */
.pc-num,
.pc-chip__num,
.pc-chip--price .pc-chip__num,
.pc-tm-spec-cell--price,
.pc-tm-spec-cell--km,
.pc-tm-badge--deal,
.pc-rent-plate {
    font-family: var(--pc-font-num);
    font-variant-numeric: tabular-nums;
}

/* ---- BR-3: Live-Thread header logo sizing -----------------------------------
   Intrinsic lockup is 430×96 (≈4.48:1). Height-constrain so it sits cleanly in
   the Astra header at any aspect; width auto-derives from the SVG viewBox. The
   width/height attrs on the <img> reserve the aspect (no CLS) before CSS applies. */
.custom-logo {
    height: 44px;
    width: auto;
    max-width: 220px;
}
@media (max-width: 768px) {
    .custom-logo { height: 36px; }
}

/* ---- BR-4: the data-highway weave (§4.6) ------------------------------------
   "The pattern IS the logo, tiled." A diagonal weave with one lit thread (red /
   emirate / deal-green per variant). Utilities to drop it on any surface, plus a
   very faint wash on the homepage hero. Tile = the SVG's 240×160 viewBox. Paths
   are relative to THIS file (pc-tesla-market/ → ../assets/brand/pattern/). */
.pc-weave,
.pc-weave--dark,
.pc-weave--deal,
.pc-weave--dubai,
.pc-weave--abudhabi,
.pc-weave--sharjah {
    background-repeat: repeat;
    background-size: 240px 160px;
}
.pc-weave           { background-image: url(../assets/brand/pattern/pattern-light.svg); }
.pc-weave--dark     { background-image: url(../assets/brand/pattern/pattern-dark.svg); }
.pc-weave--deal     { background-image: url(../assets/brand/pattern/pattern-deal.svg); }
.pc-weave--dubai    { background-image: url(../assets/brand/pattern/pattern-dubai.svg); }
.pc-weave--abudhabi { background-image: url(../assets/brand/pattern/pattern-abudhabi.svg); }
.pc-weave--sharjah  { background-image: url(../assets/brand/pattern/pattern-sharjah.svg); }

/* Homepage hero — a faint weave behind the existing gradient (additive ::before,
   so the gradient + the light text hero are untouched). Very low opacity = a
   texture, not a statement (two-colour restraint). */
.pc-home-hero { position: relative; }
.pc-home-hero > * { position: relative; z-index: 1; }
.pc-home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url(../assets/brand/pattern/pattern-light.svg) repeat;
    background-size: 240px 160px;
    opacity: 0.05;
    pointer-events: none;
}