:root {
  /* Brand palette — Soviraa Purefoods (forest green / warm gold / cream) */
  --color-brand-accent: #3B5C2E;
  --color-brand-accent-hover: #2E4A23;
  --color-brand-plum: #BF9B4F;
  --color-brand-offwhite: #FAF5ED;
  --color-brand-light-gray: #F5F2EC;
  --color-brand-lime: #BF9B4F;
  --color-brand-olive: #4A6B38;
  --color-brand-muted-text: #6B7B65;

  /* Modern storefront palette */
  --color-bg: var(--color-surface);
  --color-surface: #ffffff;
  --color-sand: #D4C5A9;
  --color-taupe: #A89878;
  --color-espresso: #3B5C2E;
  --color-charcoal: #1A2416;
  --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(59, 92, 46, 0.35);
  --color-border-soft: rgba(59, 92, 46, 0.12);
  --color-border-strong: rgba(59, 92, 46, 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(59, 92, 46, 0.12);
  --color-white-70: rgba(255, 255, 255, 0.7);
  --color-tab-focus-bg: rgba(59, 92, 46, 0.12);
  --color-tab-disabled: rgba(59, 92, 46, 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(26, 36, 22, 0.08);
  --color-shadow-subtle-rgba: rgba(26, 36, 22, 0.05);
  --color-bg-hover-light: #e9e9e9;

  /* Storefront shell overlays and gradients */
  --color-shell-bg-top: #FAF7F0;
  --color-shell-bg-bottom: #F5F0E6;
  --color-shell-highlight-soft: rgba(191, 155, 79, 0.18);
  --color-shell-surface-dark: #EDE8DF;
  --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(26, 36, 22, 0.08);
  --color-shell-drawer-shadow: rgba(26, 36, 22, 0.18);
  --color-shell-overlay: rgba(26, 36, 22, 0.36);
  --color-shell-drawer-border: rgba(255, 255, 255, 0.3);
  --color-shell-cart-drawer-shadow: rgba(26, 36, 22, 0.22);
  --color-shell-cart-drawer-border: rgba(59, 92, 46, 0.12);
  --color-shell-cart-drawer-border-strong: rgba(59, 92, 46, 0.16);
  --color-shell-cart-drawer-muted: rgba(59, 92, 46, 0.68);
  --color-shell-cart-drawer-muted-strong: rgba(59, 92, 46, 0.72);
  --color-shell-cart-drawer-muted-soft: rgba(59, 92, 46, 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(250, 245, 237, 0.92);
  --color-shell-cart-drawer-action: rgba(59, 92, 46, 0.08);
  --color-shell-legal-text: rgba(26, 36, 22, 0.7);
  --color-shell-placeholder: rgba(26, 36, 22, 0.54);
  --color-shell-link-hover-bg: rgba(59, 92, 46, 0.06);
  --color-shell-link-hover-border: rgba(59, 92, 46, 0.14);
  --color-shell-logo-border: rgba(59, 92, 46, 0.12);
  --color-shell-active-bg: rgba(59, 92, 46, 0.12);
  --color-shell-active-border: rgba(59, 92, 46, 0.32);
  --color-shell-category-bg: rgba(250, 245, 237, 0.92);
  --color-shell-category-border: rgba(59, 92, 46, 0.12);
  --color-shell-category-active-border: rgba(59, 92, 46, 0.4);
  --color-shell-nav-bg: var(--color-brand-accent);
  --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(59, 92, 46, 0.1);
  --color-shell-footer-legal-bg: rgba(250, 245, 237, 0.8);
  --color-shell-announcement-close: rgba(255, 255, 255, 0.14);
  --color-shell-announcement-close-hover: rgba(255, 255, 255, 0.22);
}