/* ============================================================================
   Central Valley German Shepherds — design tokens (LIGHT, professional)
   Warm-bone canvas · graphite ink · steel-blue accent · Manrope + Inter.
   Dark regions (header, footer, hero, photo overlays) opt into `.on-dark`.
   ========================================================================== */

:root {
  /* ---- Canvas & surfaces ---- */
  --bg-900: #f7f5f0;   /* page base */
  --bg-850: #f0ece4;   /* alternating section */
  --bg-800: #ffffff;   /* surface / inputs / cells */
  --bg-750: #ffffff;   /* raised card */
  --bg-700: #eeeae1;   /* hover / quiet button */
  --bg-650: #e5e0d5;

  /* ---- Ink ---- */
  --ink-900: #1a1d22;  /* headings */
  --ink-800: #2c3037;
  --ink-700: #464b52;  /* body */
  --ink-500: #6b7178;  /* secondary */
  --ink-400: #6a7079;  /* meta — darkened to meet WCAG AA on light surfaces */

  /* ---- Hairlines ---- */
  --line:        rgba(24, 28, 34, 0.10);
  --line-strong: rgba(24, 28, 34, 0.16);
  --line-steel:  rgba(74, 106, 134, 0.30);

  /* ---- Steel-blue accent ---- */
  --steel-200: #557593;
  --steel-300: #3f5d76;
  --steel-400: #587c98;
  --steel-500: #48678a;
  --steel-600: #3a5470;
  --steel-700: #2c4258;
  --steel-800: #e9eff5;
  --steel-glow: rgba(74, 106, 134, 0.20);

  --gold: #bf9a3d;

  /* ---- Photo grade — subtle unified tone so mixed snapshots feel cohesive ---- */
  --photo-grade: saturate(0.9) contrast(1.04) sepia(0.05);

  /* ---- Status ---- */
  --ok:      #3f8b5f;  --ok-bg:   rgba(63, 139, 95, 0.12);
  --warn:    #856526;  --warn-bg: rgba(169, 130, 47, 0.14);
  --gone:    #74797f;  --gone-bg: rgba(116, 121, 127, 0.10);

  /* ---- Typography (Manrope headings · Inter body) ---- */
  --font-display: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --fs-display: clamp(2rem, 1.45rem + 2.4vw, 3.4rem);
  --fs-h1:      clamp(1.7rem, 1.4rem + 1.5vw, 2.45rem);
  --fs-h2:      clamp(1.4rem, 1.2rem + 1.05vw, 1.95rem);
  --fs-h3:      clamp(1.18rem, 1.08rem + 0.5vw, 1.4rem);
  --fs-h4:      clamp(1.02rem, 0.98rem + 0.25vw, 1.16rem);
  --fs-lead:    clamp(1rem, 0.96rem + 0.28vw, 1.14rem);
  --fs-body:    1rem;
  --fs-sm:      0.9rem;
  --fs-xs:      0.8rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.1;
  --lh-snug:  1.28;
  --lh-body:  1.6;

  --track-eyebrow: 0.14em;
  --track-caps:    0.06em;

  /* ---- Space & rhythm (tightened) ---- */
  --container: 1180px;
  --container-narrow: 760px;
  --gutter: clamp(1.15rem, 3.4vw, 2.5rem);
  --sec-y: clamp(2.75rem, 2.1rem + 2.4vw, 4.5rem);
  --sec-y-sm: clamp(2rem, 1.7rem + 1.2vw, 3rem);

  /* ---- Radii ---- */
  --r-sm: 7px;
  --r:    11px;
  --r-lg: 15px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* ---- Shadows ---- */
  --shadow-1: 0 1px 2px rgba(23, 26, 31, 0.06);
  --shadow-2: 0 12px 30px -18px rgba(23, 26, 31, 0.18);
  --shadow-3: 0 24px 55px -28px rgba(23, 26, 31, 0.24);
  --shadow-glow: 0 0 0 1px var(--line-steel), 0 14px 34px -22px rgba(23, 26, 31, 0.20);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.45s;
  --dur-fast: 0.2s;

  --header-h: 68px;
}

/* ============================================================================
   Dark context — over dark backgrounds / photography.
   ========================================================================== */
.on-dark,
.site-header,
.site-footer,
.hero,
.page-hero.has-media,
.cta-band,
.mobile-menu,
.dog-media,
.puppy-media,
.l-media,
.feature-media {
  --bg-900: #0a0c0f;
  --bg-850: #0d1014;
  --bg-800: #12151b;
  --bg-750: #161a21;
  --bg-700: #1d2229;
  --bg-650: #262c35;

  --ink-900: #f5f2ea;
  --ink-800: #e7e3da;
  --ink-700: #c9c5bc;
  --ink-500: #9a978f;
  --ink-400: #8b8781;

  --line:        rgba(245, 242, 234, 0.10);
  --line-strong: rgba(245, 242, 234, 0.18);
  --line-steel:  rgba(125, 154, 180, 0.30);

  --steel-200: #c3d2df;
  --steel-300: #9fb6c9;
  --steel-800: #22323f;

  --gold: #c9a86a;

  --shadow-1: 0 2px 6px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 20px 45px -26px rgba(0, 0, 0, 0.7);
  --shadow-3: 0 34px 70px -34px rgba(0, 0, 0, 0.8);
  --shadow-glow: 0 0 0 1px var(--line-steel), 0 24px 55px -28px rgba(0, 0, 0, 0.8);
}