/* =============================================================================
   Mueller's Collection Pages — collection-tokens.css
   Version: 1.0.0

   CSS custom properties for collection pages and the package grid.
   All tokens are scoped to :root and prefixed --mrp-col-.
   No generic element selectors are used in this file.
   ============================================================================= */

:root {

  /* ── Colour — backgrounds ──────────────────────────────────────────────────── */
  --mrp-col-bg:              #ffffff;
  --mrp-col-bg-alt:          #f7f7f5;
  --mrp-col-bg-card:         #ffffff;
  --mrp-col-bg-card-img:     #f7f7f5;    /* neutral behind contained images     */
  --mrp-col-bg-placeholder:  #ededeb;    /* no-image placeholder                */

  /* ── Colour — text ─────────────────────────────────────────────────────────── */
  --mrp-col-text-primary:    #111111;
  --mrp-col-text-secondary:  #6b6b6b;
  --mrp-col-text-muted:      #9a9a96;
  --mrp-col-text-brand:      #111111;

  /* ── Colour — borders ──────────────────────────────────────────────────────── */
  --mrp-col-border:          #e4e4e0;
  --mrp-col-border-strong:   #c8c8c2;
  --mrp-col-border-focus:    #111111;

  /* ── Colour — accent / interactive ────────────────────────────────────────── */
  --mrp-col-accent:          #111111;
  --mrp-col-accent-hover:    #3a3a3a;
  --mrp-col-accent-text:     #ffffff;

  /* ── Colour — filter chips ─────────────────────────────────────────────────── */
  --mrp-col-chip-bg:         #111111;
  --mrp-col-chip-text:       #ffffff;
  --mrp-col-chip-clear-bg:   transparent;
  --mrp-col-chip-clear-text: #6b6b6b;
  --mrp-col-chip-clear-border: #c8c8c2;

  /* ── Typography ────────────────────────────────────────────────────────────── */
  --mrp-col-font-sans:            -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --mrp-col-font-size-xs:         0.6875rem;   /* 11 px — eyebrow / brand labels  */
  --mrp-col-font-size-sm:         0.8125rem;   /* 13 px — meta, count, chips      */
  --mrp-col-font-size-base:       1rem;        /* 16 px                           */
  --mrp-col-font-size-card-title: 1.0625rem;   /* 17 px                           */
  --mrp-col-font-size-h1:         clamp(1.75rem, 3.5vw, 2.75rem);

  /* ── Layout ────────────────────────────────────────────────────────────────── */
  --mrp-col-page-max-width:  1400px;
  --mrp-col-page-gutter:     clamp(1rem, 4vw, 2.5rem);
  --mrp-col-sidebar-width:   264px;
  --mrp-col-body-gap:        2rem;
  --mrp-col-grid-gap:        clamp(1rem, 2vw, 1.5rem);
  --mrp-col-section-gap:     2rem;

  /* ── Card ──────────────────────────────────────────────────────────────────── */
  --mrp-col-card-radius:     2px;
  --mrp-col-card-img-pad:    4%;          /* padding inside primary image area   */
  --mrp-col-card-shadow:     none;
  --mrp-col-card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.07);

  /* ── Transitions ───────────────────────────────────────────────────────────── */
  --mrp-col-transition:      0.18s ease;
  --mrp-col-img-swap:        450ms ease;  /* primary→hover crossfade             */

  /* ── Z-index ───────────────────────────────────────────────────────────────── */
  --mrp-col-drawer-z:         900;
  --mrp-col-backdrop-z:       850;
}