:root {
  /* surfaces */
  --color-surface-primary: #F7F7F4;   /* page background (warm off-white) */
  --color-surface-raised: #FFFFFF;     /* cards, panels, inputs */
  --color-surface-dark: #111418;      /* dark band, primary nav button */
  --color-surface-dark-2: #1C2028;    /* card inside dark band */
  /* text */
  --color-text-primary: #111418;
  --color-text-secondary: #4A5262;
  --color-text-muted: #5B6372;        /* captions; keeps >=4.5:1 on white */
  --color-text-disabled: #8A909C;     /* taken domains */
  /* borders */
  --color-border-subtle: #E4E6EB;
  --color-border-strong: #DCDFE6;     /* inputs, chips */
  --color-divider: #F0F1F4;           /* row separators */
  /* action — ONE accent for every primary action */
  --color-action-primary: #2F54EB;
  --color-action-primary-hover: #1D3BC4;
  --color-action-primary-pressed: #1D3BC4;
  --color-action-primary-surface: #E9EDFF;
  /* brand nod — use sparingly (cart count badge, CTA on dark band) */
  --color-brand-expression: #C6F36B;
  --color-brand-expression-surface: #E3F6EA; /* selected-state surfaces (green "in cart") */
  /* interaction aliases — same blue accent, kept so existing CSS keeps working */
  --color-interaction: #2F54EB;
  --color-interaction-hover: #1D3BC4;
  --color-interaction-surface: #E9EDFF;
  /* status — only for state, never decoration */
  --color-status-success: #0F6A3A;
  --color-status-success-surface: #E3F6EA;
  --color-status-success-border: #BDE5CB;
  --color-status-warning: #8A4B00;
  --color-status-warning-surface: #FFF4E5;
  --color-status-warning-border: #F5D9A8;
  --color-status-error: #B42318;
  --color-status-error-surface: #F8E7E4;
  --color-error: #B42318; /* alias kept for live drawer/menu rules */
  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif; /* weights 500/700 */
  --font-ui: "Geist", system-ui, sans-serif;                    /* weights 400/500/600 */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;
  --radius-subtle: 4px;
  --radius-sm: 4px;
  --radius-md: 12px; /* menus, drawers, small panels */
  --radius-control: 12px;  /* buttons, inputs */
  --radius-search: 20px;   /* search panels */
  --radius-card: 20px;     /* panels */
  --radius-band: 28px;     /* dark pricing band */
  --radius-pill: 999px;    /* chips, badges, nav CTA */
  --border-default: 1px solid var(--color-border-subtle);
  --border-focus: 2px solid var(--color-action-primary);
  --shadow-overlay: 0 16px 38px rgb(17 20 24 / 16%);
  --shadow-search: 0 12px 40px rgb(17 20 24 / 8%);
  --duration-fast: 120ms;
  --duration-standard: 180ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
}