/* Shared portal design values. Component layout stays in its own stylesheet. */
:root {
  --portal-color-burgundy: #301820;
  --portal-color-burgundy-hover: #482633;
  --portal-color-accent: #865764;
  --portal-color-text: #32292b;
  --portal-color-muted: #867469;
  --portal-color-cart-muted: #828279;
  --portal-color-white: #fff;
  --portal-color-cream: #f8f7f3;
  --portal-color-rose: #f3edef;
  --portal-color-progress-track: #e4d6db;
  --portal-color-border-warm: #ded4c8;
  --portal-color-border-soft: #e5e3dc;
  --portal-color-border-cart: #e1dfd7;
  --portal-color-ivory: #e6ded1;
  --portal-color-footer-muted: #c2afa7;
  --portal-color-footer-border: #61434b;
  --portal-color-header-surface: #faf7f1;
  --portal-color-header-border: #ded1c4;
  --portal-color-header-hover: #ede3d8;

  /* Shared dropdown appearance; position and width belong to the host component. */
  --portal-dropdown-surface: var(--portal-color-header-surface);
  --portal-dropdown-highlight: var(--portal-color-rose);
  --portal-dropdown-text: var(--portal-color-burgundy);
  --portal-dropdown-border: var(--portal-color-border-warm);
  --portal-dropdown-shadow: 0 10px 28px rgb(48 24 32 / .08);

  --portal-font-ui: Manrope, Arial, sans-serif;
  --portal-font-editorial: 'Bodoni Moda', Georgia, serif;
  --portal-font-interface: 'DM Sans', Arial, sans-serif;

  --portal-shell-width: 1600px;
  --portal-shell-gutter: min(5vw, 80px);
  --portal-catalog-gutter: clamp(24px, 2vw, 32px);

  --portal-space-8: 8px;
  --portal-space-12: 12px;
  --portal-space-16: 16px;
  --portal-space-18: 18px;
  --portal-space-20: 20px;
  --portal-space-24: 24px;
  --portal-space-32: 32px;
  --portal-space-40: 40px;
  --portal-space-48: 48px;
}