/*
 * Design tokens — the single place to re-skin the (temporary) brand.
 * Change colours / fonts / radius here and the whole site follows.
 * No component should hard-code a colour; use these variables.
 */
:root {
  /* Palette — warm, friendly local pet shop (not a generic SaaS gradient) */
  --c-bg: #faf6ef;          /* warm cream page */
  --c-bg-2: #f2ebdf;        /* subtle band / alt surface */
  --c-surface: #ffffff;     /* cards */
  --c-ink: #241f1a;         /* primary text (warm near-black) */
  --c-ink-2: #5b5247;       /* secondary text */
  --c-ink-3: #8b8072;       /* muted / captions */
  --c-line: #e7ddce;        /* borders / dividers */
  --c-line-2: #d8ccb9;

  --c-primary: #1f6f52;     /* deep green — trust, natural */
  --c-primary-ink: #14503b; /* text on soft / hover */
  --c-primary-soft: #e2efe8;
  --c-accent: #ef6f4c;      /* warm coral — CTAs, highlights (use sparingly) */
  --c-accent-ink: #c9502f;
  --c-accent-soft: #fce6dd;
  --c-gold: #d9a441;        /* featured / stars */

  --c-danger: #c0402c;
  --c-danger-soft: #f7e2dd;
  --c-warn: #a9720a;
  --c-warn-soft: #f7eccf;
  --c-ok: #1f6f52;
  --c-ok-soft: #dcefe4;
  --c-info-soft: #e5eef4;

  /* Typography */
  --font-head: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semi: 600;
  --fw-bold: 700;

  /* Radius */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(36, 31, 26, 0.06), 0 1px 3px rgba(36, 31, 26, 0.05);
  --shadow: 0 6px 18px rgba(36, 31, 26, 0.08);
  --shadow-lg: 0 18px 48px rgba(36, 31, 26, 0.14);

  /* Layout */
  --container: 1180px;
  --gap: 20px;
  --header-h: 70px;

  /* Transitions */
  --t: 160ms ease;
}