/* ==========================================================================
   PetBlip design tokens — the single source of truth for colour, type,
   spacing, radius and shadow. Every other stylesheet reads from here;
   never hard-code a colour in a component or page file.
   ========================================================================== */
:root {
  /* Surfaces */
  --pb-bg:            #fafaf8;
  --pb-surface:       #ffffff;
  --pb-surface-2:     #f4f4f6;   /* inputs, pills */
  --pb-surface-warm:  #fdf1d8;   /* soft amber chips */
  --pb-border:        #eeeae2;
  --pb-border-2:      #efefef;
  --pb-border-3:      #ece8de;

  /* Text */
  --pb-text:          #1d1d1f;
  --pb-text-2:        #3a3a40;
  --pb-text-3:        #55555c;
  --pb-text-muted:    #6b6b72;
  --pb-text-faint:    #8a8a90;

  /* Brand */
  --pb-link:          #896500;
  --pb-link-hover:    #6d5000;
  --pb-primary:       #906d02;   /* primary buttons */
  --pb-primary-hover: #7a5c00;
  --pb-orange:        #fb8a10;
  --pb-orange-2:      #fb9a1a;
  --pb-amber:         #fbb231;
  --pb-amber-soft:    #fef5dd;
  --pb-amber-tint:    #fbecc9;

  /* Status / accents */
  --pb-red:           #f0353b;
  --pb-red-soft:      #ffe3e3;
  --pb-green:         #1f9d4c;
  --pb-green-soft:    #dcf5e4;
  --pb-purple:        #5b3fe0;
  --pb-purple-soft:   #ece8fc;
  --pb-blue:          #3b5bdb;
  --pb-blue-soft:     #e2e8fb;
  --pb-pink:          #f43f8e;

  /* Typography */
  --pb-font-head: 'Nunito', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pb-font-body: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --pb-font-script: 'Kalam', cursive;

  /* Radius */
  --pb-r-sm: 8px;
  --pb-r-md: 12px;
  --pb-r-lg: 16px;
  --pb-r-xl: 18px;
  --pb-r-pill: 999px;

  /* Shadow */
  --pb-shadow-card:    0 2px 12px rgba(60, 40, 0, 0.05);
  --pb-shadow-pop:     0 18px 50px rgba(40, 28, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.04);
  --pb-shadow-btn:     0 4px 14px rgba(140, 90, 0, 0.12);

  /* Layout (overridden by breakpoints in layout.css) */
  --pb-header-h: 69px;
  --pb-col-left: 300px;
  --pb-col-right: 320px;
  --pb-gap: 40px;
  --pb-page-max: 1802px;
  --pb-z-header: 30;
  --pb-z-popover: 50;
  --pb-z-drawer: 60;

  /* ----------------------------------------------------------------------
     Legacy aliases — the pre-redesign pages (admin-facing and not-yet-ported
     public pages) still read these names. They resolve to the new palette so
     a page that loads tokens.css looks consistent while it is being ported.
     Remove once every page has been migrated.
     ---------------------------------------------------------------------- */
  --bg: var(--pb-bg);
  --surface: var(--pb-surface);
  --surface-2: var(--pb-surface-2);
  --border: var(--pb-border);
  --text-1: var(--pb-text);
  --text-2: var(--pb-text-2);
  --text-3: var(--pb-text-muted);
  --accent: var(--pb-link);
  --accent-lt: var(--pb-amber-soft);
  --accent-dk: var(--pb-link-hover);
  --green: var(--pb-green);
  --amber: var(--pb-orange);
  --red: var(--pb-red);
  --r-sm: var(--pb-r-sm);
  --r-md: var(--pb-r-md);
  --r-lg: var(--pb-r-lg);
}

@media (min-width: 1700px) {
  :root {
    --pb-col-left: 358px;
    --pb-col-right: 363px;
    --pb-gap: 56px;
  }
}
@media (max-width: 899px) {
  :root { --pb-header-h: 72px; }
}