/* ============================================================
   brand.css — single source of truth for the color system.
   I Auto Detailing — palette DERIVED FROM brand_assets/logo.png
   (chrome-on-black oval badge, electric-blue wordmark).
   Recolor a client by editing ONLY the tokens in the first
   :root block below; everything else references these.
   Recolor check (this build, all pass):
     accent-deep  vs bg    = 7.16:1  (small text/dividers on white)
     accent-bright vs dark = 6.84:1  (accent on dark sections)
     muted        vs bg-2  = 6.05:1  (secondary text on light tint)
   No red anywhere (not semantic, not decorative). #0B7FFF is the
   logo's electric blue — every blue derives from these tokens, never
   default Tailwind. Chrome/silver tokens are DECORATIVE ONLY.
   ============================================================ */
:root {
  /* — Core palette (hex) — */
  --color-primary:      #0A0A0A;  /* brand primary — dark hero/nav/footer/buttons (= dark) */
  --color-primary-mid:  #1C1C1C;  /* mid-tone — hover, secondary buttons, dividers on dark */
  --color-accent:       #0B7FFF;  /* electric blue from the wordmark — CTAs / fills / text-on-dark */
  --color-accent-deep:  #0855B0;  /* on-LIGHT accent fallback (7.16:1 vs white) — small text/dividers on white */
  --color-accent-bright:#2E9BFF;  /* on-DARK accent (6.84:1 vs dark) — every accent use on --color-dark */
  --color-dark:         #0A0A0A;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #202124;  /* deepest dark-elevation surface */
  --color-ink:          #101317;  /* body + heading text */
  --color-muted:        #565E68;  /* muted / secondary text — 6.05:1 vs bg-2, 6.56:1 vs bg */
  --color-muted-light:  #AAB1BB;  /* lighter muted text — dark-section secondary text */
  --color-line:         #D9DBE0;  /* hairlines / borders on light */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F4F5F7;  /* light section tint */
  --color-rating:       #F59E0B;  /* star-rating gold — functional, not brand */

  /* — Chrome / silver — DECORATIVE ONLY (borders, hairlines, logo-adjacent rules).
       Never a text color, link color, or heading color. — */
  --color-silver:       #9A9A9A;
  --color-silver-light: #EDEDED;
  --color-silver-dark:  #4F4F4F;

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:     10, 10, 10;
  --color-primary-mid-rgb: 28, 28, 28;
  --color-accent-rgb:      11, 127, 255;
  --color-accent-deep-rgb: 8, 85, 176;
  --color-accent-bright-rgb: 46, 155, 255;
  --color-dark-rgb:        10, 10, 10;
  --color-dark-3-rgb:      32, 33, 36;
  --color-ink-rgb:         16, 19, 23;

  /* size the nav off the client logo — square ~1:1 chrome badge (see CLAUDE.md) */
  --nav-height:         104px;  /* nav bar height — clears the 76px square badge with breathing room */
  --nav-logo-height:    76px;   /* client logo <img> height in the nav */
  --footer-logo-height: 116px;  /* client logo <img> height in the footer */
}

/* ============================================================
   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; }