/* Epicure Candy brand v1 tokens. Mirrors Figma collections brand/Primitives, brand/Color, brand/Type, brand/Shape. */
:root {
  /* Primitives */
  --cream-0: #FFF9F1; --cream-50: #FFFCF8; --cream-100: #FFF1DF; --cream-200: #FBE6CC; --cream-300: #F1D6B4;
  --cocoa-100: #E9DFD5; --cocoa-200: #D6C7B8; --cocoa-300: #B8A493; --cocoa-400: #95806E; --cocoa-500: #745F4F;
  --cocoa-600: #5A4739; --cocoa-700: #43342A; --cocoa-800: #2E231C; --cocoa-900: #1F1712;
  --spearmint-50: #E3F6EE; --spearmint-100: #C3ECDA; --spearmint-300: #6FD1A9; --spearmint-500: #13A673; --spearmint-600: #0B8A5E; --spearmint-700: #08714D; --spearmint-800: #075A3E;
  --bubblegum-50: #FFE6F1; --bubblegum-500: #FF7AB6; --bubblegum-700: #D93A85;
  --butterscotch-50: #FFF1CF; --butterscotch-500: #FFB627; --butterscotch-700: #C27A00;
  --blueberry-50: #E6EAFF; --blueberry-500: #3D5AFE; --blueberry-700: #2438B8;
  --cherry-50: #FDE4E1; --cherry-500: #E63B2E; --cherry-700: #A82219;
  --lemon-50: #FFF8D1; --lemon-500: #FFE45C;

  /* Color roles */
  --color-surface-page: var(--cream-0);
  --color-surface-band: var(--cream-100);
  --color-surface-card: var(--cream-50);
  --color-surface-sunken: var(--cream-200);
  --color-surface-inverse: var(--cocoa-900);
  --color-text-primary: var(--cocoa-900);
  --color-text-secondary: var(--cocoa-600);
  --color-text-muted: var(--cocoa-500);
  --color-text-inverse: var(--cream-0);
  --color-text-accent: var(--spearmint-700);
  --color-border-subtle: var(--cocoa-200);
  --color-border-strong: var(--cocoa-900);
  --color-action-primary: var(--spearmint-500);
  --color-action-primary-hover: var(--spearmint-300);
  --color-action-on-primary: var(--cocoa-900);
  --color-action-ink: var(--cocoa-900);
  --color-action-ink-hover: var(--cocoa-700);
  --color-action-on-ink: var(--cream-0);
  --color-focus-ring: var(--spearmint-700);
  --color-badge-new: var(--blueberry-500);
  --color-badge-best-seller: var(--butterscotch-500);
  --color-badge-promo: var(--bubblegum-500);
  --color-badge-prebook: var(--spearmint-500);

  /* Type */
  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-accent: "Fraunces", Georgia, serif;
  --text-display-xl: clamp(48px, 33.14px + 3.810vw, 88px);
  --text-display-l: clamp(40px, 31.09px + 2.286vw, 64px);
  --text-h2: clamp(30px, 24.80px + 1.333vw, 44px);
  --text-h3: clamp(22px, 19.77px + 0.571vw, 28px);
  --text-h4: clamp(18px, 17.26px + 0.190vw, 20px);
  --text-kicker: clamp(22px, 19.03px + 0.762vw, 30px);
  --text-body-l: clamp(18px, 17.26px + 0.190vw, 20px);
  --text-body-m: clamp(16px, 15.63px + 0.095vw, 17px);
  --text-body-s: clamp(14px, 13.63px + 0.095vw, 15px);
  --text-label: clamp(14px, 13.63px + 0.095vw, 15px);
  --text-button: 15px;
  --text-badge: 12px;

  /* Space, shape, layout */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px;
  --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-full: 999px;
  --border-width: 1.5px;
  --page-margin: 96px;
  --content-max: 1248px;
  --section-gap: 128px;
  --section-half: 64px;
  --band-pad: 96px;
  --header-h: 80px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-reveal: 700ms;
  --dur-ui: 200ms;
}
@media (max-width: 1199px) {
  :root { --page-margin: 48px; --section-gap: 104px; --section-half: 52px; --band-pad: 80px; }
}
@media (max-width: 767px) {
  :root { --page-margin: 20px; --section-gap: 80px; --section-half: 40px; --band-pad: 56px; --header-h: 64px; }
}