.sp-storefront-design {
  --warning-600: #9a6508;
  --danger-600: #a82d34;
  --info-50: #e8f1f7;
  --surface-rail: var(--cream);
  --surface-overlay: rgba(23,19,13,.5);
  --selected-ring: var(--ink);
  --selected-fill: var(--cream);
  --accent-highlight: var(--pastel-mint);
  --accent-on-dark: var(--pastel-peach);
  --accent-attention: var(--pastel-yellow);
  --status-success-fg: var(--success-600);
  --status-success-bg: var(--success-50);
  --status-warning-fg: var(--warning-600);
  --status-warning-bg: var(--warning-50);
  --status-danger-fg: var(--danger-600);
  --status-danger-bg: var(--danger-50);
  --status-info-fg: var(--info-500);
  --status-info-bg: var(--info-50);
  --radius-control: var(--radius-sm);
  --radius-tile: var(--radius-md);
  --radius-card: var(--radius-lg);
  --radius-panel: var(--radius-xl);
  --choice-padding: 6px;
  --choice-gap: 6px;
  --choice-label-size: 12px;
  --choice-label-weight: var(--fw-bold);
  --choice-media-radius: calc(var(--radius-tile) - 5px);
  --selection-tick-size: 20px;
  --selection-tick-inset: 10px;
  --pill-tab-gap: 6px;
  --control-sm: 36px;
  --control-md: 44px;
  --control-lg: 52px;
  --container-wide: 1400px;
  --fs-hero: clamp(2.1rem,1rem + 3.6vw,3.6rem);
  --fs-section: clamp(1.5rem,1rem + 1.6vw,2.2rem);
  --fs-page: clamp(1.6rem,1rem + 2vw,2.4rem);
  --fs-2xs: .6875rem;
  --ls-tighter: -.045em;
  --ls-eyebrow: .12em;
  --shadow-popover: 0 18px 46px rgba(23,19,13,.26);
  --lift-sm: translateY(-1px);
  --lift-md: translateY(-4px);
  --purple-600: var(--ink);
  --sp-home-section-space: clamp(40px,5vw,72px);
  --sp-home-edge-space: clamp(40px,5vw,72px);
}