/* PetAndPool - Concept 2 "Bold & Vibrant" - design tokens
   Source of truth: src/concept2.jsx + src/shared.jsx + src/data.js
   Grid density: 4 products per row. */

:root {
  /* ── Brand ── */
  --pp-magenta: #d6166e;        /* primary */
  --pp-magenta-dark: #a8104f;   /* primary hover / nav "All departments" */
  --pp-magenta-press: #8a0c40;  /* primary active (derived) */
  --pp-magenta-soft: #fde8f0;   /* tinted surface / selected chip */
  --pp-pool: #0ea5c9;           /* secondary */
  --pp-pool-dark: #0a7fa0;      /* secondary used on solid fills */
  --pp-pool-soft: #e0f4fa;
  --pp-yellow: #ffd400;         /* accent - sale flags, "hot" badges */
  --pp-yellow-dark: #e6bf00;    /* accent hover (derived) */

  /* ── Text ── */
  --pp-ink: #1a1614;            /* headings, primary text, dark surfaces */
  --pp-text-2: #3a3530;         /* body */
  --pp-text-3: #6b6560;         /* meta, captions */
  --pp-text-4: #9a948f;         /* disabled */
  --pp-on-dark: #ffffff;
  --pp-on-dark-70: rgba(255, 255, 255, .7);
  --pp-on-dark-50: rgba(255, 255, 255, .5);

  /* ── Surfaces ── */
  --pp-bg: #ffffff;             /* cards, header */
  --pp-bg-page: #fafaf8;        /* shop + PDP page background */
  --pp-bg-soft: #fff5fa;        /* magenta-tinted hover surface */
  --pp-bg-sunken: #faf8f5;
  --pp-border: #f0e3eb;         /* card + divider (warm pink-grey) */
  --pp-border-strong: #e0d4dd;  /* input + secondary button border */

  /* ── Status ── */
  --pp-success: #2f8f5f;        /* in stock */
  --pp-warning: #c47a16;        /* "Only a few left" */
  --pp-danger: #c63d3d;
  --pp-star: #f5b13a;
  --pp-star-empty: #e5e1d8;

  /* ── Product placeholder tiles (solid colour, no photography) ── */
  --pp-tile-sand: #f1e4d2;
  --pp-tile-lilac: #e6d5f0;
  --pp-tile-sky: #dcecf5;
  --pp-tile-blush: #f5dfe1;
  --pp-tile-sage: #e0e8d4;
  --pp-tile-cream: #f0e2c8;
  --pp-tile-mist: #d9e6e8;
  --pp-tile-peach: #f3d5c8;

  /* ── Typography ── */
  --pp-font: Geist, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --pp-font-mono: "JetBrains Mono", ui-monospace, monospace;

  --pp-fs-hero: 74px;      --pp-ls-hero: -2.5px;   /* homepage hero headline */
  --pp-fs-page: 48px;      --pp-ls-page: -1.5px;   /* category banner H1 */
  --pp-fs-h1: 44px;        --pp-ls-h1: -1.5px;     /* section heading */
  --pp-fs-h2: 38px;        --pp-ls-h2: -1.2px;
  --pp-fs-h3: 36px;        --pp-ls-h3: -1px;       /* PDP product title */
  --pp-fs-h4: 26px;        --pp-ls-h4: -0.8px;     /* deals-row title */
  --pp-fs-h5: 22px;        --pp-ls-h5: -0.5px;
  --pp-fs-h6: 18px;
  --pp-fs-lead: 17px;      /* hero body */
  --pp-fs-body-lg: 15px;
  --pp-fs-body: 14px;      /* default body, inputs, buttons */
  --pp-fs-sm: 13px;        /* nav meta, small buttons */
  --pp-fs-xs: 12px;        /* meta */
  --pp-fs-2xs: 11px;       /* kickers, badges, labels */
  --pp-fs-price-lg: 44px;  /* PDP price */
  --pp-fs-price: 22px;     /* card price */

  --pp-fw-regular: 400;
  --pp-fw-medium: 500;
  --pp-fw-semibold: 600;
  --pp-fw-bold: 700;
  --pp-fw-black: 800;      /* display headings + prices only */

  --pp-lh-display: 0.95;
  --pp-lh-tight: 1.1;
  --pp-lh-snug: 1.3;
  --pp-lh-body: 1.45;
  --pp-lh-loose: 1.55;
  --pp-ls-kicker: 1px;     /* uppercase kickers, 11px/700 */

  /* ── Spacing (4px base) ── */
  --pp-sp-1: 4px;   --pp-sp-2: 8px;   --pp-sp-3: 12px;  --pp-sp-4: 16px;
  --pp-sp-5: 20px;  --pp-sp-6: 24px;  --pp-sp-7: 28px;  --pp-sp-8: 32px;
  --pp-sp-10: 40px; --pp-sp-12: 48px; --pp-sp-14: 56px; --pp-sp-15: 60px;
  --pp-sp-18: 70px;

  --pp-container: 1280px;     /* max-width of the page content well */
  --pp-gutter: 60px;          /* page left/right gutter (desktop ≥1280) */
  --pp-section-gap: 70px;     /* space above each homepage section */
  --pp-section-gap-sm: 60px;  /* promo/trust strips */
  --pp-grid-gap: 18px;        /* product grid gap, all densities */
  --pp-card-pad: 16px;
  --pp-panel-pad: 24px;

  /* ── Radii ── */
  --pp-r-xs: 4px;    /* badges, small chips */
  --pp-r-sm: 6px;
  --pp-r-md: 8px;    /* buttons, chips, inputs */
  --pp-r-lg: 10px;   /* large buttons, qty stepper */
  --pp-r-xl: 12px;   /* product card, promo tile */
  --pp-r-2xl: 14px;  /* section panels, hero-adjacent cards */
  --pp-r-pill: 999px;

  /* ── Borders ── */
  --pp-bw-hair: 1px;    /* card + divider */
  --pp-bw-mid: 1.5px;   /* input, filter "All filters" */
  --pp-bw-bold: 2px;    /* emphasis frame: search field, deal panels */
  --pp-bw-tab: 3px;     /* active tab underline / active rail marker */

  /* ── Elevation ── */
  --pp-shadow-xs: 0 1px 4px rgba(0, 0, 0, .08);          /* wishlist bubble */
  --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 0 0 1px rgba(0, 0, 0, .04); /* logo pill */
  --pp-shadow-card-hover: 0 8px 24px rgba(26, 22, 20, .10);
  --pp-shadow-mega: 0 20px 50px rgba(0, 0, 0, .12);      /* mega menu */

  /* ── Focus ── */
  --pp-focus-ring: 0 0 0 3px rgba(214, 22, 110, .35);
  --pp-focus-ring-input: 0 0 0 4px rgba(214, 22, 110, .20);

  /* ── Motion ── */
  --pp-dur-fast: 120ms;
  --pp-dur: 180ms;
  --pp-ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Fixed component sizes ── */
  --pp-topbar-h: 38px;
  --pp-search-h: 48px;
  --pp-navband-item-py: 14px;
  --pp-navband-item-px: 22px;
  --pp-tile-h: 240px;         /* product image area, standard 4-up grid */
  --pp-tile-h-dense: 200px;   /* product image area inside deals rows */
  --pp-cat-tile-h: 300px;
  --pp-hero-h: 460px;             /* legacy fallback - prefer aspect-ratio below */
  --pp-hero-ratio-desktop: 16/7;  /* adjust to match your desktop banner image ratio */
  --pp-hero-ratio-mobile:  1/1;   /* adjust to match your mobile banner image ratio */
  --pp-pdp-gallery-h: 540px;
  --pp-thumb: 86px;
  --pp-pager-btn: 38px;
  --pp-z-navband-mega: 999999;
  --pp-z-filterbar: 5;
}

@media (min-width: 1600px) {
  :root {
    --pp-container: 1440px;
  }
}