/* ============================================================
   brand.css — single source of truth for the Tool Co color system.
   [DEALER-BUILD] Values LOCKED from brand_assets/logo.png (the
   navy + sky-blue "Tool Co" flame/mascot mark). The blues below were
   extracted from that file — not guessed, not default Tailwind.
   Neutrals (silver/ink/muted) are [DERIVE]d to sit with the logo.
   Recolor by editing ONLY the tokens in the first :root block;
   every page references these. No red. No gold.
   Contrast check (verified this build, WCAG luminance):
     accent-deep #2768B1 vs bg #FFFFFF        = 5.7:1  (>=4.5 ok)
     accent-bright #70B9FB vs dark #013074    = 6.0:1  (>=4.5 ok)
     accent #4EA5F4 vs dark #013074           = 4.8:1  (>=4.5 ok)
     muted #5A6472 vs bg-2 #F2F6FB            = 5.5:1  (>=4.5 ok)
     muted-light #A5B6CC vs dark #013074      = 5.9:1  (>=4.5 ok)
     primary #013074 vs accent #4EA5F4 (btn)  = 4.8:1  (>=4.5 ok)
   NOTE: accent #4EA5F4 on WHITE is only 2.6:1 — never use the raw
   accent for small text/strokes on light; use accent-deep.
   ============================================================ */
:root {
  /* — Core palette (hex) — */
  --color-primary:      #013074;  /* logo navy — dark hero/sections, footer, nav, primary buttons */
  --color-primary-mid:  #2768B1;  /* logo mid-blue — hover, secondary buttons, borders on dark */
  --color-accent:       #4EA5F4;  /* logo sky blue — icons, highlights, on-dark accent, accent button fill */
  --color-accent-deep:  #2768B1;  /* on-LIGHT fallback for the sky accent (small text/strokes on white) */
  --color-accent-bright:#70B9FB;  /* logo light sky — on-DARK accent (eyebrows, spans, checks on --color-dark). CLAUDE.md calls this "accent-light". */
  --color-tint:         #C7E4FA;  /* logo pale blue — subtle fills, dividers, glow on dark */
  --color-dark:         #013074;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #0B3A84;  /* dark-elevation surface (cards on dark) */
  --color-silver:       #8A94A3;  /* [DERIVE] tool-steel gray — hairlines, chrome, LARGE text on dark only (4.1:1) */
  --color-ink:          #0E1726;  /* [DERIVE] near-black — headings + body */
  --color-muted:        #5A6472;  /* [DERIVE] muted / secondary text on light */
  --color-muted-light:  #A5B6CC;  /* muted / secondary text on dark */
  --color-line:         #D5DEEA;  /* hairlines / borders on light */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F2F6FB;  /* light section tint (cool, off the logo's pale blue) */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:       1, 48, 116;
  --color-primary-mid-rgb:   39, 104, 177;
  --color-accent-rgb:        78, 165, 244;
  --color-accent-deep-rgb:   39, 104, 177;
  --color-accent-bright-rgb: 112, 185, 251;
  --color-tint-rgb:          199, 228, 250;
  --color-dark-rgb:          1, 48, 116;
  --color-dark-3-rgb:        11, 58, 132;
  --color-ink-rgb:           14, 23, 38;
  --color-silver-rgb:        138, 148, 163;

  /* Nav sized off the client logo (brand_assets/logo.png, 1994x789 ≈ 2.53:1).
     At 64px tall the mark renders ~162px wide — the wordmark under the flame
     stays legible without crowding the nav row. See CLAUDE.md logo rules. */
  --nav-height:         92px;   /* nav bar height */
  --nav-logo-height:    64px;   /* client logo <img> height in the nav */
  --footer-logo-height: 112px;  /* 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/driver 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; }