/* ============================================================
   brand.css — single source of truth for the color system.
   CLIENT: Superior Collision (Brownsville, TX) — gold + black.
   Palette derived from the logo lockup (black serif wordmark +
   metallic gold shield/banner). Recolor a client by editing ONLY
   the tokens in the first :root block below; everything else
   references these.

   ⚠️ PENDING APPROVAL: brand_assets/logo.png HAS now landed and the
   real artwork has been sampled, but the hexes below are STILL the
   original [DERIVE] estimates — nothing here has been changed yet.
   The sampled values differ from these estimates and a comparison is
   with the owner for sign-off; a token edit propagates to all 15
   pages, so it is deliberately not auto-applied. Do not "fix" these
   hexes until that decision comes back.
   See CLAUDE.md → Active Blockers → Launch-blocking.

   Recolor check (measured, WCAG 2.1 relative luminance):
     accent-deep  #9A6B00 vs bg   #FFFFFF = 4.69:1  (>=4.5 ✓)
     accent-brite #F2C230 vs dark #0D0D0D = 11.60:1 (>=4.5 ✓)
     muted        #6B6B6B vs bg-2 #F4F4F2 = 4.84:1  (>=4.5 ✓)
     on-accent    #141414 vs accent #F2C230 = 11.00:1 (>=4.5 ✓)
   ============================================================ */
:root {
  /* — Core palette (hex) — */
  --color-primary:      #0D0D0D;  /* brand primary slot (= dark) — logo black */
  --color-primary-mid:  #2B2B2B;  /* first dark-elevation step + primary hover */
  --color-accent:       #F2C230;  /* logo gold — fills, on-dark text, decorative */
  --color-accent-hover: #D9A81C;  /* pressed/hover gold — keeps ink text legible on top */
  --color-accent-deep:  #9A6B00;  /* the on-LIGHT accent fallback — small text/icons on white */
  --color-accent-bright:#F2C230;  /* on-DARK accent — the pure gold reads 11.6:1 on --color-dark */
  --color-on-accent:    #141414;  /* text/icon color ON a gold fill — never white; gold is too light */
  --color-dark:         #0D0D0D;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #262626;  /* deepest dark-elevation surface */
  --color-ink:          #141414;  /* body + heading text */
  --color-muted:        #6B6B6B;  /* muted / secondary text on light — clears 4.5:1 vs bg-2 & bg */
  --color-muted-light:  #ADADAD;  /* muted text on dark — 8.66:1 vs --color-dark */
  --color-line:         #D6D6D6;  /* hairlines / borders / eyebrow text on dark */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F4F4F2;  /* light section tint — warm neutral, not the cool slate */
  --color-rating:       var(--color-accent);  /* star gold == brand gold; no near-duplicate hex drift */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:       13, 13, 13;
  --color-primary-mid-rgb:   43, 43, 43;
  --color-accent-rgb:        242, 194, 48;
  --color-accent-deep-rgb:   154, 107, 0;
  --color-accent-bright-rgb: 242, 194, 48;
  --color-dark-rgb:          13, 13, 13;
  --color-dark-3-rgb:        38, 38, 38;
  --color-ink-rgb:           20, 20, 20;

  /* size the nav off the client logo — see CLAUDE.md logo rules.
     Derived from the real logo: the lockup crop is 1229x338, i.e. 3.636:1, so
     each height below fixes the rendered width. The nav bar stays 84px, which
     leaves 19px of breathing room above and below the 46px lockup. */
  --nav-height:         84px;   /* nav bar height */
  --nav-logo-height:    46px;   /* logo <img> height in the nav  -> 167px wide at 3.636:1 */
  --nav-logo-height-sm: 36px;   /* ...and on phones            -> 131px wide */
  --footer-logo-height: 60px;   /* logo <img> height in the footer -> 218px wide */
}

/* ============================================================
   Uniform content-photo container — used for EVERY content photo
   site-wide. One ratio (4:3) so no photo differs in size from
   another. Never use a fixed h-[Npx]. The ONLY exception is
   people/owner portraits: add --portrait (3:4, top-anchored).
   ============================================================ */
.photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 16px;
  background: var(--color-bg-2);
  box-shadow: 0 20px 45px -24px rgba(var(--color-dark-rgb), 0.60),
              0 0 0 1px rgba(var(--color-dark-rgb), 0.06) inset;
}
.photo-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.photo-frame--portrait { aspect-ratio: 3 / 4; }
.photo-frame--portrait > img { object-position: center top; }

/* Before/after pair (gallery only). The source photos are single images with
   the BEFORE stacked above the AFTER; forcing them into 4:3 crops one half of
   the comparison away, so pairs get their own square ratio. Every cell in the
   gallery grid uses this, so the grid stays uniform — equal cells, no ragged
   row. Do NOT use outside the gallery. */
.photo-frame--pair { aspect-ratio: 1 / 1; }