/* ==========================================
   PetAddictStore — Design Tokens
   Loaded before petaddict.css. Three layers:
     1. Primitives  — raw palette & scales (never use directly in components)
     2. Semantic    — what a value means (bg, text, link, success…)
     3. Component   — per-component hooks (button, card, badge, input…)

   Contrast rules (WCAG, checked against #fffbf7 cream):
   - Brand fills (honey, amber, blush, sage, sky) are all LIGHT. Text on them
     is always ink #30271f (8–13:1). White text on them fails (≤1.8:1).
   - Brand fills are never used as text colour. Text-coloured variants are
     the -700 shades: amber-700 5.6:1, blush-700 6.6:1, sage-700 6.9:1,
     sky-700 6.1:1.
   - Great Vibes is decorative only: ≥28px, never for body copy, prices,
     buttons, or form labels.
   ========================================== */

:root {
  /* ---------- 1. Primitives ---------- */

  /* Primary — honey & amber */
  --pa-honey-100: #fdf1d9;
  --pa-honey-300: #f9dba0;   /* brand */
  --pa-amber-50:  #fef6e6;
  --pa-amber-100: #fdedce;
  --pa-amber-300: #fad17c;
  --pa-amber-500: #f7b52a;   /* brand */
  --pa-amber-600: #e9a316;
  --pa-amber-700: #885e07;   /* text-safe */
  --pa-amber-800: #614305;

  /* Primary — ink (warm dark brown, also the dark neutral) */
  --pa-ink-900: #30271f;     /* brand */
  --pa-ink-800: #3f342a;
  --pa-ink-600: #645c55;     /* muted text, 6.4:1 on cream */
  --pa-ink-400: #8d8680;     /* input borders / icons, 3.5:1 */
  --pa-ink-300: #aca6a1;
  --pa-ink-200: #cbc6c1;
  --pa-ink-100: #ece2d0;     /* hairline borders */

  /* Secondary — blush, sage, sky */
  --pa-blush-100: #fef2ef;
  --pa-blush-300: #facccd;   /* brand */
  --pa-blush-700: #a63033;
  --pa-sage-100:  #edf4e7;
  --pa-sage-300:  #a7d6a5;   /* brand */
  --pa-sage-700:  #2d642b;
  --pa-sky-100:   #edf4f6;
  --pa-sky-300:   #a7d6f0;   /* brand */
  --pa-sky-700:   #23668b;

  /* Neutrals */
  --pa-cream: #fffbf7;       /* brand — page background */
  --pa-sand:  #f9efdc;       /* brand — alternate sections */
  --pa-white: #ffffff;       /* raised surfaces (cards, dropdowns) */

  /* Typography */
  --pa-font-sans: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pa-font-script: 'Great Vibes', 'Brush Script MT', cursive;

  --pa-text-xs:   0.75rem;   /* 12 */
  --pa-text-sm:   0.875rem;  /* 14 */
  --pa-text-base: 1rem;      /* 16 */
  --pa-text-lg:   1.125rem;  /* 18 */
  --pa-text-xl:   1.25rem;   /* 20 */
  --pa-text-2xl:  1.5rem;    /* 24 */
  --pa-text-3xl:  1.875rem;  /* 30 */
  --pa-text-4xl:  2.25rem;   /* 36 */
  --pa-text-5xl:  3rem;      /* 48 */
  --pa-text-script-sm: 2rem;      /* 32 — smallest allowed script */
  --pa-text-script-md: 2.75rem;   /* 44 */
  --pa-text-script-lg: clamp(2.75rem, 6vw, 4.5rem);

  --pa-weight-regular: 400;
  --pa-weight-semibold: 600;
  --pa-weight-bold: 700;
  --pa-weight-extrabold: 800;

  --pa-leading-tight: 1.2;
  --pa-leading-snug: 1.4;
  --pa-leading-normal: 1.6;

  /* Spacing — 4px base */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 0.75rem;
  --pa-space-4: 1rem;
  --pa-space-5: 1.25rem;
  --pa-space-6: 1.5rem;
  --pa-space-8: 2rem;
  --pa-space-10: 2.5rem;
  --pa-space-12: 3rem;
  --pa-space-16: 4rem;

  /* Radius — soft, to match Nunito's rounded terminals */
  --pa-radius-xs: 6px;
  --pa-radius-sm: 10px;
  --pa-radius: 16px;
  --pa-radius-lg: 24px;
  --pa-radius-pill: 999px;

  /* Shadows — tinted with ink, not black */
  --pa-shadow-sm: 0 1px 3px rgba(48, 39, 31, 0.06);
  --pa-shadow: 0 2px 12px rgba(48, 39, 31, 0.07);
  --pa-shadow-hover: 0 10px 28px rgba(48, 39, 31, 0.12);

  /* Motion */
  --pa-duration: 0.2s;
  --pa-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --pa-transition: all var(--pa-duration) var(--pa-ease);

  /* ---------- 2. Semantic ---------- */

  --pa-bg: var(--pa-cream);
  --pa-bg-alt: var(--pa-sand);
  --pa-surface: var(--pa-white);
  --pa-surface-hover: var(--pa-amber-50);

  --pa-text: var(--pa-ink-900);
  --pa-text-muted: var(--pa-ink-600);
  --pa-text-subtle: var(--pa-ink-400);
  --pa-heading: var(--pa-ink-900);

  --pa-border: var(--pa-ink-100);
  --pa-border-strong: var(--pa-ink-400);

  --pa-primary: var(--pa-amber-500);        /* fills: buttons, badges, active pills */
  --pa-primary-hover: var(--pa-amber-600);
  --pa-primary-soft: var(--pa-honey-300);   /* tinted panels, hero, highlights */
  --pa-primary-subtle: var(--pa-amber-50);
  --pa-primary-strong: var(--pa-amber-700); /* focus/checked borders */
  --pa-on-primary: var(--pa-ink-900);

  --pa-link: var(--pa-amber-700);
  --pa-link-hover: var(--pa-amber-800);

  --pa-accent: var(--pa-ink-900);           /* dark bands: announcement bar, footer */
  --pa-on-accent: var(--pa-cream);

  --pa-success: var(--pa-sage-700);
  --pa-success-bg: var(--pa-sage-100);
  --pa-danger: var(--pa-blush-700);
  --pa-danger-bg: var(--pa-blush-100);
  --pa-info: var(--pa-sky-700);
  --pa-info-bg: var(--pa-sky-100);
  --pa-warning: var(--pa-amber-700);
  --pa-warning-bg: var(--pa-amber-100);
  --pa-rating: var(--pa-amber-500);

  --pa-focus-ring: 0 0 0 3px rgba(247, 181, 42, 0.45);

  /* Legacy aliases — kept so existing rules keep working */
  --pa-primary-dark: var(--pa-primary-hover);
  --pa-primary-light: var(--pa-primary-subtle);
  --pa-bg-warm: var(--pa-bg-alt);
  --pa-text-light: var(--pa-text-muted);

  /* ---------- 3. Component ---------- */

  --pa-btn-bg: var(--pa-primary);
  --pa-btn-bg-hover: var(--pa-primary-hover);
  --pa-btn-color: var(--pa-on-primary);
  --pa-btn-radius: var(--pa-radius-pill);
  --pa-btn-weight: var(--pa-weight-bold);
  --pa-btn-height: 44px;

  --pa-btn-dark-bg: var(--pa-ink-900);
  --pa-btn-dark-bg-hover: var(--pa-ink-800);
  --pa-btn-dark-color: var(--pa-cream);

  --pa-card-bg: var(--pa-surface);
  --pa-card-radius: var(--pa-radius);
  --pa-card-shadow: var(--pa-shadow);
  --pa-card-shadow-hover: var(--pa-shadow-hover);

  --pa-input-bg: var(--pa-white);
  --pa-input-border: var(--pa-border-strong);
  --pa-input-border-focus: var(--pa-primary-strong);
  --pa-input-radius: var(--pa-radius-sm);

  --pa-badge-radius: var(--pa-radius-pill);
  --pa-badge-new-bg: var(--pa-sage-300);
  --pa-badge-sale-bg: var(--pa-blush-300);
  --pa-badge-info-bg: var(--pa-sky-300);
  --pa-badge-color: var(--pa-ink-900);

  /* ---------- Bootstrap 5 bridge ---------- */
  --bs-body-font-family: var(--pa-font-sans);
  --bs-body-bg: var(--pa-bg);
  --bs-body-color: var(--pa-text);
  --bs-border-color: var(--pa-border);
  --bs-primary: #f7b52a;
  --bs-primary-rgb: 247, 181, 42;
  --bs-link-color: var(--pa-link);
  --bs-link-color-rgb: 136, 94, 7;
  --bs-link-hover-color: var(--pa-link-hover);
  --bs-link-hover-color-rgb: 97, 67, 5;
}

/* ---------- Base type ---------- */

body {
  font-family: var(--pa-font-sans);
  font-size: var(--pa-text-base);
  line-height: var(--pa-leading-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--pa-font-sans);
  font-weight: var(--pa-weight-extrabold);
  line-height: var(--pa-leading-tight);
  color: var(--pa-heading);
}

/* ---------- Utilities ---------- */

/* Script accent — Great Vibes. Use for taglines/eyebrows above a heading. */
.pa-script {
  font-family: var(--pa-font-script);
  font-weight: 400;
  font-size: var(--pa-text-script-sm);
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
}
.pa-script-lg { font-size: var(--pa-text-script-lg); }

.pa-bg-honey { background-color: var(--pa-honey-300); color: var(--pa-ink-900); }
.pa-bg-sand  { background-color: var(--pa-sand);      color: var(--pa-ink-900); }
.pa-bg-blush { background-color: var(--pa-blush-300); color: var(--pa-ink-900); }
.pa-bg-sage  { background-color: var(--pa-sage-300);  color: var(--pa-ink-900); }
.pa-bg-sky   { background-color: var(--pa-sky-300);   color: var(--pa-ink-900); }
.pa-bg-ink   { background-color: var(--pa-ink-900);   color: var(--pa-cream); }

.pa-badge {
  display: inline-block;
  padding: 0.2em 0.75em;
  border-radius: var(--pa-badge-radius);
  font-size: var(--pa-text-xs);
  font-weight: var(--pa-weight-bold);
  color: var(--pa-badge-color);
  background: var(--pa-primary-soft);
}
.pa-badge-new  { background: var(--pa-badge-new-bg); }
.pa-badge-sale { background: var(--pa-badge-sale-bg); }
.pa-badge-info { background: var(--pa-badge-info-bg); }

:focus-visible {
  outline: 2px solid var(--pa-primary-strong);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}