:root {
  /* Brand palette (from docs/color-palette-usage.md) */
  --color-brand-accent: #551c25;
  --color-brand-accent-hover: #7a1e2b;
  --color-brand-plum: #3A2D37;
  --color-brand-offwhite: #f6f0e9;
  --color-brand-light-gray: #f5f5f5;
  --color-brand-lime: #ebec95;
  --color-brand-olive: #acb36a;
  --color-brand-muted-text: #777777;

  /* Modern storefront palette */
  --color-bg: var(--color-surface);
  --color-surface: #ffffff;
  --color-sand: #d9c7b1;
  --color-taupe: #b7a38f;
  --color-espresso: #3A2D37;
  --color-charcoal: #1f1a17;
  --color-metal: var(--color-brand-olive);
  --color-border: #e5e5e5;
  --color-success: #2f6b4f;
  --color-error: #9b3d36;

  /* Common semantic helpers */
  --color-action-primary-hover: var(--color-brand-accent-hover);
  --color-focus-ring: rgba(191, 44, 125, 0.35);
  --color-border-soft: rgba(58, 45, 55, 0.12);
  --color-border-strong: rgba(58, 45, 55, 0.18);

  /* Shared neutrals */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-gray-100: #f1f1f1;
  --color-gray-200: #d2d2d2;
  --color-gray-300: #cccccc;
  --color-gray-350: #d4d4d4;
  --color-gray-400: #bbbbbb;
  --color-gray-450: #dddddd;
  --color-gray-500: #eeeeee;
  --color-gray-700: #444444;
  --color-gray-scrollbar: #aeb6bf;

  /* Legacy brand colors retained as aliases during migration */
  --color-legacy-action-orange: #ef6c00;
  --color-legacy-active-red: #fa010e;
  --color-legacy-active-red-hover: #ff0008;
  --color-legacy-active-red-indicator: #fa000c;
  --color-legacy-accent-yellow: #ffc000;
  --color-legacy-nav-blue: #01295f;
  --color-legacy-selected-bg: #fadadc;

  /* Semantic bridge tokens */
  --color-action-primary: var(--color-brand-accent);
  --color-nav-accent: var(--color-brand-plum);
  --color-tab-active: var(--color-brand-accent);
  --color-tab-active-hover: var(--color-brand-accent-hover);
  --color-tab-indicator: var(--color-brand-accent);
  --color-footer-accent: var(--color-brand-accent);
  --color-text-secondary: var(--color-brand-muted-text);
  --color-scrollbar-thumb: var(--color-gray-scrollbar);
  --color-selected-bg: rgba(191, 44, 125, 0.12);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-tab-focus-bg: rgba(191, 44, 125, 0.12);
  --color-tab-disabled: rgba(58, 45, 55, 0.35);

  /* Shared interactive/system colors */
  --color-ui-accent: var(--color-brand-accent);
  --color-overlay-dark-30: rgba(0, 0, 0, 0.3);
  --color-overlay-dark-50: rgba(0, 0, 0, 0.5);
  --color-overlay-dark-90: rgba(0, 0, 0, 0.9);
  --color-shadow-ambient-light: #ffffff70;
  --color-shadow-ambient-dark: #00000070;
  --color-shadow-soft-rgba: rgba(31, 26, 23, 0.08);
  --color-shadow-subtle-rgba: rgba(31, 26, 23, 0.05);
  --color-bg-hover-light: #e9e9e9;

  /* Storefront shell overlays and gradients */
  --color-shell-bg-top: #fbf7f1;
  --color-shell-bg-bottom: #f8f3ec;
  --color-shell-highlight-soft: rgba(235, 236, 149, 0.18);
  --color-shell-surface-dark: #efe9e1;
  --color-shell-surface-blur: rgba(255, 253, 249, 0.94);
  --color-shell-surface-elevated: rgba(255, 255, 255, 0.88);
  --color-shell-surface-muted: rgba(255, 255, 255, 0.8);
  --color-shell-surface-strong: rgba(255, 255, 255, 0.96);
  --color-shell-surface-card: rgba(255, 255, 255, 0.82);
  --color-shell-surface-social: rgba(255, 255, 255, 0.9);
  --color-shell-header-shadow: rgba(31, 26, 23, 0.08);
  --color-shell-drawer-shadow: rgba(31, 26, 23, 0.18);
  --color-shell-overlay: rgba(31, 26, 23, 0.36);
  --color-shell-drawer-border: rgba(255, 255, 255, 0.3);
  --color-shell-cart-drawer-shadow: rgba(31, 26, 23, 0.22);
  --color-shell-cart-drawer-border: rgba(58, 45, 55, 0.12);
  --color-shell-cart-drawer-border-strong: rgba(58, 45, 55, 0.16);
  --color-shell-cart-drawer-muted: rgba(58, 45, 55, 0.68);
  --color-shell-cart-drawer-muted-strong: rgba(58, 45, 55, 0.72);
  --color-shell-cart-drawer-muted-soft: rgba(58, 45, 55, 0.66);
  --color-shell-cart-drawer-card: rgba(255, 255, 255, 0.55);
  --color-shell-cart-drawer-surface: rgba(255, 255, 255, 0.7);
  --color-shell-cart-drawer-footer: rgba(246, 241, 234, 0.92);
  --color-shell-cart-drawer-action: rgba(58, 45, 55, 0.08);
  --color-shell-legal-text: rgba(31, 26, 23, 0.7);
  --color-shell-placeholder: rgba(31, 26, 23, 0.54);
  --color-shell-link-hover-bg: rgba(58, 45, 55, 0.06);
  --color-shell-link-hover-border: rgba(58, 45, 55, 0.14);
  --color-shell-logo-border: rgba(58, 45, 55, 0.12);
  --color-shell-active-bg: rgba(191, 44, 125, 0.12);
  --color-shell-active-border: rgba(191, 44, 125, 0.32);
  --color-shell-category-bg: rgba(246, 241, 234, 0.92);
  --color-shell-category-border: rgba(58, 45, 55, 0.12);
  --color-shell-category-active-border: rgba(191, 44, 125, 0.4);
  --color-shell-nav-bg: var(--color-charcoal);
  --color-shell-nav-fg:#FFFFFF;
  --color-shell-nav-fg-muted: #FFFFFF;
  --color-shell-nav-border: rgba(255, 255, 255, 0.18);
  --color-shell-nav-control-bg: rgba(255, 255, 255, 0.12);
  --color-shell-nav-control-bg-hover: rgba(255, 255, 255, 0.18);
  --color-shell-drawer-link-hover: rgba(191, 44, 125, 0.1);
  --color-shell-footer-legal-bg: rgba(246, 241, 234, 0.8);
  --color-shell-announcement-close: rgba(255, 255, 255, 0.14);
  --color-shell-announcement-close-hover: rgba(255, 255, 255, 0.22);
}