:root{
  /* ===== BRAND ===== */
  --brand-primary:#C8102E;
  --brand-primary-hover:#A90D27;
  --brand-primary-active:#8E0B21;
  --brand-primary-soft:#FFF1F4;
  --brand-black:#111111;
  --brand-white:#FFFFFF;

  /* ===== NEUTRAL ===== */
  --neutral-000:#FFFFFF; --neutral-025:#FCFCFC; --neutral-050:#F8F8F8; --neutral-100:#F3F3F3;
  --neutral-150:#EEEEEE; --neutral-200:#E5E5E5; --neutral-250:#DADADA; --neutral-300:#D2D2D2;
  --neutral-400:#A8A8A8; --neutral-500:#808080; --neutral-600:#606060; --neutral-700:#444444;
  --neutral-800:#292929; --neutral-900:#191919; --neutral-950:#101010; --neutral-1000:#000000;

  /* ===== SEMANTIC COLORS ===== */
  --color-bg-page:var(--neutral-025); --color-bg-surface:var(--neutral-000); --color-bg-subtle:var(--neutral-050);
  --color-bg-muted:var(--neutral-100); --color-bg-inverse:var(--neutral-950);
  --color-text-primary:var(--neutral-950); --color-text-secondary:var(--neutral-700);
  --color-text-muted:var(--neutral-500); --color-text-disabled:var(--neutral-400); --color-text-inverse:var(--neutral-000);
  --color-border-subtle:var(--neutral-150); --color-border-default:var(--neutral-200); --color-border-strong:var(--neutral-300);
  --color-border-focus:var(--brand-primary);
  --color-interactive-primary:var(--brand-primary); --color-interactive-primary-hover:var(--brand-primary-hover);
  --color-interactive-primary-active:var(--brand-primary-active); --color-interactive-disabled:var(--neutral-300);
  --color-success:#238636; --color-success-soft:#EAF6EE; --color-warning:#B7791F; --color-warning-soft:#FFF7E6;
  --color-error:#C62828; --color-error-soft:#FFF0F0; --color-info:#246BCE; --color-info-soft:#EEF5FF;
  --color-rating:#D9A700; --color-stock:#238636; --color-low-stock:#B7791F; --color-out-of-stock:#777777;
  --color-sale:var(--brand-primary);

  /* ===== PRODUCT COLORS ===== */
  --product-black:#161616; --product-white:#FDFDFD; --product-cream:#E9E0CF; --product-red:#B5242F;
  --product-pastel-blue:#AFC9D3; --product-pastel-green:#B8C8B2; --product-pink:#E7B7C7;
  --product-yellow:#E1C75F; --product-orange:#D7834C; --product-steel:#B8BCC0; --product-matte-black:#242424;
  --product-emerald:#486B5A; --product-terracotta:#A65F49; --product-linen-beige:#D8CBB8;

  /* ===== TYPOGRAPHY ===== */
  --font-family-primary:"Noto Sans","DejaVu Sans","Segoe UI",Arial,sans-serif;
  --font-family-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --font-weight-regular:400; --font-weight-medium:500; --font-weight-semibold:600; --font-weight-bold:700;
  --font-size-10:.625rem; --font-size-11:.6875rem; --font-size-12:.75rem; --font-size-13:.8125rem;
  --font-size-14:.875rem; --font-size-15:.9375rem; --font-size-16:1rem; --font-size-18:1.125rem;
  --font-size-20:1.25rem; --font-size-22:1.375rem; --font-size-24:1.5rem; --font-size-26:1.625rem;
  --font-size-28:1.75rem; --font-size-32:2rem; --font-size-36:2.25rem; --font-size-40:2.5rem;
  --font-size-48:3rem; --font-size-56:3.5rem;
  --line-height-16:1rem; --line-height-18:1.125rem; --line-height-20:1.25rem; --line-height-22:1.375rem;
  --line-height-24:1.5rem; --line-height-26:1.625rem; --line-height-28:1.75rem; --line-height-30:1.875rem;
  --line-height-32:2rem; --line-height-34:2.125rem; --line-height-40:2.5rem; --line-height-48:3rem;
  --line-height-56:3.5rem; --line-height-64:4rem;
  --tracking-tight:-.02em; --tracking-normal:0; --tracking-wide:.04em; --tracking-caps:.08em;

  /* ===== SPACING ===== */
  --space-0:0; --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-5:1.25rem; --space-6:1.5rem; --space-7:2rem; --space-8:2.5rem; --space-9:3rem; --space-10:4rem; --space-11:5rem; --space-12:6rem; --space-13:7.5rem; --space-14:9rem;

  /* ===== SIZING ===== */
  --size-icon-xs:.75rem; --size-icon-sm:1rem; --size-icon-md:1.25rem; --size-icon-lg:1.5rem; --size-icon-xl:2rem;
  --size-control-xs:2rem; --size-control-sm:2.25rem; --size-control-md:2.75rem; --size-control-lg:3rem; --size-control-xl:3.5rem;
  --size-touch-target:2.75rem; --size-avatar-sm:2rem; --size-avatar-md:2.5rem; --size-avatar-lg:3rem;

  /* ===== RADIUS BORDER SHADOW ===== */
  --radius-0:0; --radius-xs:.125rem; --radius-sm:.25rem; --radius-md:.375rem; --radius-lg:.5rem;
  --radius-xl:.75rem; --radius-2xl:1rem; --radius-pill:999px;
  --border-width-0:0; --border-width-1:1px; --border-width-2:2px; --border-width-focus:2px;
  --shadow-none:none; --shadow-xs:0 1px 2px rgba(0,0,0,.04); --shadow-sm:0 2px 8px rgba(0,0,0,.06);
  --shadow-md:0 8px 24px rgba(0,0,0,.08); --shadow-lg:0 16px 40px rgba(0,0,0,.12);
  --shadow-xl:0 24px 64px rgba(0,0,0,.16); --shadow-dropdown:0 12px 40px rgba(0,0,0,.14);
  --shadow-focus:0 0 0 3px rgba(200,16,46,.16);

  /* ===== MOTION OPACITY ===== */
  --opacity-disabled:.45; --opacity-muted:.7; --opacity-overlay:.56; --opacity-hover-overlay:.08;
  --duration-instant:80ms; --duration-fast:120ms; --duration-normal:200ms; --duration-slow:320ms; --duration-slower:480ms;
  --ease-linear:linear; --ease-standard:cubic-bezier(.2,.8,.2,1); --ease-enter:cubic-bezier(.16,1,.3,1); --ease-exit:cubic-bezier(.7,0,.84,0);

  /* ===== LAYOUT Z-INDEX ===== */
  --container-max:90rem; --content-max:85rem; --content-narrow:48rem; --grid-columns:12; --grid-gutter:1.5rem;
  --page-margin-xs:1rem; --page-margin-sm:1rem; --page-margin-md:1.5rem; --page-margin-lg:1.5rem; --page-margin-xl:2rem; --page-margin-xxl:2rem;
  --z-base:0; --z-raised:10; --z-sticky:100; --z-dropdown:300; --z-header:400; --z-offcanvas:600;
  --z-overlay:700; --z-modal:800; --z-popover:900; --z-tooltip:1000; --z-toast:1100;

  /* ===== COMPONENT BUTTON ===== */
  --button-height-sm:2.25rem;
  --button-height-md:2.75rem;
  --button-height-lg:3rem;
  --button-padding-x-sm:.75rem;
  --button-padding-x-md:1.25rem;
  --button-padding-x-lg:1.5rem;
  --button-radius:.375rem;
  --button-font-weight:600;
  --button-gap:.5rem;

  /* ===== COMPONENT ICON-BUTTON ===== */
  --icon-button-size-sm:2.25rem;
  --icon-button-size-md:2.75rem;
  --icon-button-size-lg:3rem;
  --icon-button-radius:.5rem;

  /* ===== COMPONENT INPUT ===== */
  --input-height-sm:2.25rem;
  --input-height-md:2.75rem;
  --input-height-lg:3rem;
  --input-padding-x:1rem;
  --input-radius:.375rem;

  /* ===== COMPONENT CHECKBOX ===== */
  --checkbox-visual-size:1.125rem;
  --checkbox-hit-size:2.75rem;
  --checkbox-radius:.25rem;

  /* ===== COMPONENT RADIO ===== */
  --radio-visual-size:1.125rem;
  --radio-hit-size:2.75rem;

  /* ===== COMPONENT SWITCH ===== */
  --switch-width:2.75rem;
  --switch-height:1.5rem;
  --switch-thumb:1.125rem;

  /* ===== COMPONENT BADGE ===== */
  --badge-height:1.5rem;
  --badge-padding-x:.5rem;
  --badge-radius:999px;
  --badge-font-size:.6875rem;

  /* ===== COMPONENT CHIP ===== */
  --chip-height:2rem;
  --chip-padding-x:.75rem;
  --chip-radius:999px;

  /* ===== COMPONENT TOOLTIP ===== */
  --tooltip-padding-x:.5rem;
  --tooltip-padding-y:.375rem;
  --tooltip-radius:.25rem;
  --tooltip-max-width:16rem;

  /* ===== COMPONENT POPOVER ===== */
  --popover-padding:1rem;
  --popover-radius:.5rem;
  --popover-max-width:22rem;

  /* ===== COMPONENT DROPDOWN ===== */
  --dropdown-radius:.5rem;
  --dropdown-padding:.5rem;
  --dropdown-item-height:2.5rem;
  --dropdown-shadow:var(--shadow-dropdown);

  /* ===== COMPONENT TABS ===== */
  --tabs-height:2.75rem;
  --tabs-gap:1.5rem;
  --tabs-indicator-height:2px;

  /* ===== COMPONENT ACCORDION ===== */
  --accordion-trigger-min-height:3rem;
  --accordion-content-padding-y:1rem;

  /* ===== COMPONENT PAGINATION ===== */
  --pagination-item-size:2.5rem;
  --pagination-gap:.25rem;
  --pagination-radius:.375rem;

  /* ===== COMPONENT SKELETON ===== */
  --skeleton-radius:.375rem;
  --skeleton-base:var(--neutral-100);
  --skeleton-highlight:var(--neutral-050);

  /* ===== COMPONENT TOAST ===== */
  --toast-width:22rem;
  --toast-radius:.5rem;
  --toast-padding:1rem;

  /* ===== COMPONENT ALERT ===== */
  --alert-padding:1rem;
  --alert-radius:.5rem;

  /* ===== COMPONENT MODAL ===== */
  --modal-radius:1rem;
  --modal-max-width-sm:30rem;
  --modal-max-width-md:44rem;
  --modal-max-width-lg:68rem;
  --modal-padding:1.5rem;

  /* ===== COMPONENT DRAWER ===== */
  --drawer-width:26.25rem;
  --drawer-padding:1.25rem;

  /* ===== COMPONENT HEADER ===== */
  --header-topbar-height:2.25rem;
  --header-main-height:5.5rem;
  --header-sticky-height:4.5rem;
  --header-nav-height:3rem;

  /* ===== COMPONENT SEARCH ===== */
  --search-height:3rem;
  --search-radius:.375rem;
  --search-dropdown-max-width:56rem;
  --search-dropdown-max-height:32rem;

  /* ===== COMPONENT BREADCRUMB ===== */
  --breadcrumb-height:2.5rem;
  --breadcrumb-gap:.5rem;
  --breadcrumb-font-size:.75rem;

  /* ===== COMPONENT HERO ===== */
  --hero-min-height-desktop:31rem;
  --hero-padding-desktop:3rem;
  --hero-radius:.75rem;
  --hero-content-max-width:35rem;

  /* ===== COMPONENT PROMO-CARD ===== */
  --promo-card-padding:1.5rem;
  --promo-card-radius:.75rem;
  --promo-card-min-height:12rem;

  /* ===== COMPONENT CATEGORY-CARD ===== */
  --category-card-padding:1rem;
  --category-card-radius:.75rem;
  --category-card-image-size:10rem;

  /* ===== COMPONENT PRODUCT-CARD ===== */
  --product-card-padding:1rem;
  --product-card-radius:.75rem;
  --product-card-title-min-height:2.625rem;
  --product-card-swatch-size:1.125rem;
  --product-card-swatch-gap:.375rem;
  --product-card-image-ratio:1 / 1;

  /* ===== COMPONENT PRODUCT-PRICE ===== */
  --product-price-font-size:1.5rem;
  --product-price-line-height:2rem;
  --product-price-weight:700;

  /* ===== COMPONENT SWATCH ===== */
  --swatch-size-card:1.125rem;
  --swatch-size-product:2rem;
  --swatch-selected-ring:2px;

  /* ===== COMPONENT GALLERY ===== */
  --gallery-thumb-size:5rem;
  --gallery-gap:1rem;
  --gallery-main-max:43.75rem;

  /* ===== COMPONENT FILTER-SIDEBAR ===== */
  --filter-sidebar-width-min:16.25rem;
  --filter-sidebar-width-max:18.75rem;
  --filter-sidebar-group-gap:1rem;

  /* ===== COMPONENT MINI-CART ===== */
  --mini-cart-width:26.25rem;
  --mini-cart-item-gap:1rem;

  /* ===== COMPONENT CART-ITEM ===== */
  --cart-item-image-size:6rem;
  --cart-item-gap:1rem;

  /* ===== COMPONENT CHECKOUT ===== */
  --checkout-summary-width:24rem;
  --checkout-column-gap:2rem;

  /* ===== COMPONENT FOOTER ===== */
  --footer-section-padding-y:4rem;
  --footer-column-gap:2rem;
}