/* ============================================================
   THE PETSTOP — DESIGN TOKENS (source of truth)
   Direction: C — "Sticker Shop" (approved 2026-07-13)
   Synced with the Claude Design project "The Petstop Design System".
   Site CSS must consume these tokens — never restate raw values.
   ============================================================ */
:root {
  /* ---- Brand colors ---- */
  --color-blue: #1617C9;        /* brand blue — shadows, prices, links, accents */
  --color-chartreuse: #E6F501;  /* action — CTAs, In-stock badge, highlights */
  --color-cream: #FFFDF5;       /* page canvas */
  --color-ink: #101019;         /* outlines + primary text */
  --color-muted: #4B4B58;       /* secondary text (4.5:1+ on cream) */
  --color-photo-bg: #F2F3FF;    /* placeholder photo area */
  --color-shadow-muted: #B9BACA;/* offset shadow for secondary elements */
  --color-error: #E07A5F;       /* form validation only */
  --color-on-blue: #FFFFFF;
  --color-on-blue-soft: #D8DAFF;

  /* ---- Borders, radii, shadows (sticker language) ---- */
  --border-w: 3px;              /* primary outline */
  --border-w-thin: 2.5px;       /* badges, small chips */
  --radius-card: 16px;
  --radius-btn: 14px;
  --radius-chip: 10px;
  --radius-pill: 999px;
  --shadow-card: 6px 6px 0 var(--color-blue);
  --shadow-card-hover: 4px 4px 0 var(--color-blue);
  --shadow-btn: 5px 5px 0 var(--color-blue);
  --shadow-btn-hover: 3px 3px 0 var(--color-blue);
  --shadow-badge: 3px 3px 0 var(--color-blue);
  --shadow-muted: 5px 5px 0 var(--color-shadow-muted);
  --shadow-band: 8px 8px 0 var(--color-chartreuse);

  /* ---- Typography ---- */
  --font-display: 'Lexend Mega', 'Arial Black', sans-serif;
  --font-body: 'Public Sans', -apple-system, 'Segoe UI', sans-serif;
  --tracking-display: -0.09em;  /* approved: tighter than default Lexend Mega */
  --text-hero: clamp(30px, 4.6vw, 50px);
  --text-h2: 26px;
  --text-card-title: 15.5px;
  --text-body: 16px;
  --text-small: 14.5px;
  --text-price: 20px;
  --text-badge: 12px;
  --leading-body: 1.6;
  --leading-display: 1.15;

  /* ---- LOCKED LOGO DIMENSIONS ----
     Derived from the approved Direction C mock. Assets are the
     tight-cropped SVGs (viewBox hugs artwork — see brand/logo-spec.html).
     badge-tight aspect 3105:1645 (≈1.888:1) · dogmark-tight 800:780 (≈1.026:1)
     NEVER set logo sizes outside these tokens. Width is always auto. */
  --logo-header-h: 50px;        /* badge-tight in header, desktop */
  --logo-header-h-mobile: 42px; /* badge-tight in header, ≤760px */
  --logo-footer-h: 60px;        /* badge-tight in footer, all widths */
  --hero-sticker-d: 180px;      /* chartreuse sticker circle, desktop */
  --hero-sticker-d-mobile: 140px;
  --hero-dog-h: 110px;          /* dogmark-tight inside hero sticker, desktop */
  --hero-dog-h-mobile: 84px;
  --card-watermark-h: 60px;     /* dogmark-tight-blue in photo placeholder */
  /* favicon.svg master is 512×512; export/link 32 and 180 from it */

  /* ---- Sticker geometry ---- */
  --sticker-rotate: -4deg;      /* hero sticker circle */
  --badge-rotate: 3deg;         /* stock badges on cards */
  --sticker-border-w: 3.5px;
  --hero-sticker-shadow: 7px 7px 0 var(--color-blue);

  /* ---- Controls ---- */
  --btn-h: 54px;
  --btn-pad-x: 26px;
  --input-h: 52px;
  --header-h: 78px;
  --header-h-mobile: 64px;
  --press-shift: 2px;           /* hover translate for hard-shadow elements */

  /* ---- Spacing scale (4/8 rhythm) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;

  /* ---- Motion ---- */
  --dur-press: 120ms;
  --dur-hover: 150ms;
}
@media (max-width: 760px) {
  :root {
    --logo-header-h: var(--logo-header-h-mobile);
    --hero-sticker-d: var(--hero-sticker-d-mobile);
    --hero-dog-h: var(--hero-dog-h-mobile);
    --header-h: var(--header-h-mobile);
  }
}