/* ==========================================================================
   PETLO re-theme for the older public pages

   The ~44 content, listing and flow pages (Services, Shop, Events, Stories,
   Adoption, Places, About, Contact, the Account pages, …) are built on wg.css,
   which is almost entirely token-driven. Rather than re-skin each page, this
   sheet — loaded LAST in the shared layout — re-points every --wg-* / --ob-*
   token to the PETLO palette, fonts and shadows, so the whole old design turns
   PETLO at once. A short spot-fix section follows for the few hardcoded values
   the tokens don't reach.

   Nothing about the markup or behaviour changes; this is colour, type and
   shadow only. petlo.css is deliberately NOT loaded here (it styles bare
   body/h1/.btn and would fight wg.css); the tokens do the whole job.
   ========================================================================== */

:root {
  /* ---- surfaces ---- */
  --wg-cream: #F8F9F8;         /* page background */
  --wg-sand: #F2F8F5;          /* tinted section / subtle fill */
  --wg-line: #DCEAE3;          /* hairline border */
  --wg-line-soft: #E9F1EC;

  /* ---- brand (was warm brown) → PETLO green ---- */
  --wg-brown: #1C4F3A;         /* primary brand */
  --wg-brown-dark: #143A2B;    /* primary hover */
  --wg-brown-ink: #143A2B;

  /* ---- text ---- */
  --wg-ink: #1C4F3A;           /* headings — and the footer surface */
  --wg-body: #3A4A42;          /* body copy */
  --wg-muted: #55645B;         /* secondary copy */
  --wg-faint: #9AA6A0;         /* placeholder / disabled */

  /* ---- accents ---- */
  --wg-green: #286E52;
  --wg-green-dark: #1C4F3A;
  --wg-green-tint: #E8F3EE;
  /* amber (warnings) left as wg.css set them — amber reads fine on PETLO too. */

  /* ---- dark surfaces (header hover, chips, gloss) → green ---- */
  --wg-navy: #1C4F3A;
  --wg-navy-hi: #143A2B;
  --wg-navy-card: #1C4F3A;

  /* ---- the gold accent → PETLO's lighter green (there is no gold in PETLO) ---- */
  --wg-gold: #286E52;
  --wg-gold-deep: #1C4F3A;
  --wg-tan: #C8DDD3;

  /* ---- type ---- */
  --wg-font-head: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --wg-font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;

  /* ---- shadows: PETLO's green-tinted set ---- */
  --wg-shadow-card: 0 4px 14px rgba(28, 79, 58, .06);
  --wg-shadow-lift: 0 10px 28px rgba(28, 79, 58, .10);
  --wg-shadow-float: 0 14px 34px rgba(28, 79, 58, .14);

  /* ---- OneBloc controls (OBNotify, OBSelect, OBUpload, OBValidate, …) ---- */
  --ob-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --ob-accent: #1C4F3A;
  --ob-ink: #1C4F3A;
  --ob-muted: #55645B;
  --ob-faint: #9AA6A0;
  --ob-line: #DCEAE3;
  --ob-success: #286E52;
}

/* --------------------------------------------------------------------------
   Spot-fixes — hardcoded values the tokens don't reach.
   -------------------------------------------------------------------------- */

/* Header: keep it white/clean, PETLO border rather than the sand one. */
.wg-header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--wg-line);
}

/* Footer sits on --wg-ink (now green); its muted text was a hardcoded taupe. */
.wg-footer { color: rgba(255, 255, 255, 0.82); }
.wg-footer a { color: rgba(255, 255, 255, 0.82); }
.wg-footer a:hover { color: #FFFFFF; }
.wg-footer h4 { color: #FFFFFF; }

/* Primary button carried a brown shadow; green it. */
.wg-btn-primary { box-shadow: 0 6px 18px rgba(28, 79, 58, 0.26); }

/* The "gloss" button was a brown gradient; make it the flat PETLO green so it
   matches the design's own primary buttons. */
.wg-btn-gloss {
  background: var(--wg-brown) !important;
  border-color: var(--wg-brown) !important;
  color: #FFFFFF !important;
}
.wg-btn-gloss:hover { background: var(--wg-brown-dark) !important; }

/* Pill radius to match PETLO's fully-rounded buttons. */
.wg-btn { border-radius: 9999px; }

/* The "what's on" top strip used the gold gradient; green it. */
.wg-topbar-event { background: var(--wg-green-tint); color: var(--wg-brown); }

/* The legal line was a hardcoded taupe; on the now-green footer it read low and
   off-palette. Match the rest of the footer text. */
.wg-footer-legal { color: rgba(255, 255, 255, 0.62); }

/* The footer wordmark ("PETLO") sat in the old brown ink. */
.wg-footer-logo .tx,
.wg-footer-logo .tx span { color: #FFFFFF; }