/* ============================================================
   brand.css — single source of truth for the color system.
   CLIENT: Loyalty Pro Services LLC.
   Palette DERIVED from brand_assets/logo.png (decoded pixels):
     amber  #FFAC00  (dominant saturated color, 5,424 px)
     black  #000000  (wordmark + handshake mark, 72,005 px)
   Pure #000 is softened to #111318 for large surfaces (pure-black
   fields halate against white type); it still reads as the logo's
   black. Recolor a client by editing ONLY the tokens in the first
   :root block below; everything else references these.

   Recolor gates VERIFIED for this palette:
     accent-deep   vs bg    =  4.91:1  (need 4.5) PASS
     accent-bright vs dark  = 10.82:1  (need 4.5) PASS
     muted         vs bg-2  =  5.31:1  (need 4.5) PASS
   NOTE: raw --color-accent (#FFAC00) on white is 1.88:1 — it is a
   fill / on-dark color ONLY. Never use it for small text or
   dividers on light; use --color-accent-deep there.
   ============================================================ */
:root {
  /* — Core palette (hex) — */
  --color-primary:      #111318;  /* brand primary slot (= dark) — logo black, softened */
  --color-primary-mid:  #1C1F26;  /* first dark-elevation step + primary hover */
  --color-accent:       #FFAC00;  /* THE logo amber — fill / on-dark use only (1.88:1 on white) */
  --color-accent-deep:  #9A6600;  /* on-LIGHT accent fallback: small text/dividers on white (4.91:1) */
  --color-accent-bright:#FFB929;  /* on-DARK accent — every accent use on --color-dark (10.82:1) */
  --color-dark:         #111318;  /* single canonical dark-section bg (== primary) */
  --color-dark-3:       #252932;  /* deepest dark-elevation surface */
  --color-ink:          #14161B;  /* body + heading text (18.10:1 on bg) */
  --color-muted:        #5F6672;  /* muted / secondary text — clears 4.5:1 vs bg-2 (5.31) & bg (5.78) */
  --color-muted-light:  #9CA3AF;  /* lighter muted text — on dark only (7.32:1 vs dark) */
  --color-line:         #E2E4E9;  /* hairlines / borders */
  --color-bg:           #FFFFFF;  /* page background */
  --color-bg-2:         #F5F5F7;  /* light section tint */

  /* — Channel triplets (R, G, B) for rgba() tinting — */
  --color-primary-rgb:     17, 19, 24;
  --color-primary-mid-rgb: 28, 31, 38;
  --color-accent-rgb:      255, 172, 0;
  --color-accent-deep-rgb: 154, 102, 0;
  --color-accent-bright-rgb: 255, 185, 41;
  --color-dark-rgb:        17, 19, 24;
  --color-dark-3-rgb:      37, 41, 50;
  --color-ink-rgb:         20, 22, 27;

  /* Nav sized off the client logo — see CLAUDE.md logo rules.
     Sized here for the TEXT LOCKUP currently in the nav (24px Barlow 800).
     The two *-logo-height values are pre-set for the cropped wordmark:
     logo.png's artwork is 2.81:1 but fills only 30.1% of its 1024x1024
     canvas, so the raw file cannot be dropped in at these heights — it
     needs a tight crop to its content bbox (x 89-955, y 348-655) first.
     See the asset flags in the build report. */
  --nav-height:         88px;   /* nav bar height — clears the lockup with breathing room */
  --nav-logo-height:    36px;   /* for the CROPPED 2.81:1 wordmark (=> ~101px wide) */
  --footer-logo-height: 56px;   /* for the CROPPED 2.81:1 wordmark (=> ~157px 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; }

/* --contain: for artwork/documents that must not be cropped (seals, certificates).
   Keeps the sitewide 4/3 container; fits the whole graphic inside it instead of
   filling. White plate so art already on a white background has no visible seam. */
.photo-frame--contain { background: #FFFFFF; }
.photo-frame--contain > img {
  object-fit: contain;
  padding: 6%;
}