:root {
  /* === BRAND === */
  --color-primary: #8C152D;
  --color-primary-hover: #6D1022;
  --color-accent: #CB8E6C;
  --color-accent-hover: #B87D5C;

  /* === TEXT === */
  --color-text: #000000;
  --color-text-dark: #282828;
  --color-text-body: #565656;
  --color-text-secondary: #595959;
  --color-text-input: #585858;
  --color-text-muted: #8F8F8F;
  --color-text-label: #9B9B9B;
  --color-text-light: #AAAAAA;
  --color-text-placeholder: #C3C3C3;
  --color-text-price: #9D9D9D;
  --color-text-description: #D0D0D0;
  --color-text-footer-link: #000000;

  /* === BACKGROUNDS === */
  --color-bg: #FFFFFF;
  --color-bg-light: #F9F9F9;
  --color-bg-card: #EFEFEF;
  --color-bg-filter: #F6F6F6;
  --color-bg-profile-sidebar: #F6F5F5;
  --color-bg-delivery-card: #F1F1F1;
  --color-bg-social: #E9E9E9;
  --color-bg-pagination: #E3E3E3;
  --color-bg-button-reset: #D3D3D3;
  --color-bg-card-btn: #D9D9D9;

  /* === DRAWER / OVERLAY === */
  --color-drawer-bg: rgba(43, 43, 43, 0.77);
  --color-drawer-blur: 5.45px;
  --color-overlay-modal: rgba(28, 28, 28, 0.7);
  --color-overlay-filter: rgba(115, 115, 115, 0.84);

  /* === BORDERS === */
  --color-border: #CCCCCC;
  --color-border-light: #E1E1E1;
  --color-border-section: #9F9F9F;
  --color-border-footer: #D6D6D6;
  --color-border-filter: #BEBEBE;
  --color-border-input-filter: #D1D1D1;
  --color-border-accordion: rgba(255, 255, 255, 0.34);
  --color-border-accordion-light: #CCCCCC;
  --color-border-tab: #D0D0D0;
  --color-border-payment: #E5E5E5;
  --color-border-slider: #ADADAD;
  --color-border-order: #E7E7E7;

  /* === SWATCHES === */
  --color-swatch-dark: #250E08;
  --color-swatch-light: #D6CBBB;
  --color-swatch-border: #B9B9B9;

  /* === FONTS === */
  --font-primary: 'Involve', sans-serif;
  --font-secondary: 'Inter', sans-serif;

  /* === FONT SIZES === */
  --fs-xs: 13px;
  --fs-sm: 14px;
  --fs-base: 15px;
  --fs-md: 16px;
  --fs-lg: 18px;
  --fs-xl: 20px;
  --fs-2xl: 22px;
  --fs-3xl: 24px;
  --fs-4xl: 28px;
  --fs-5xl: 32px;
  --fs-6xl: 36px;
  --fs-hero: 44px;

  /* === FONT WEIGHTS === */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* === LINE HEIGHTS === */
  --lh-tight: 1.2;
  --lh-base: 1.4;
  --lh-relaxed: 1.56;
  --lh-loose: 1.67;

  /* === LETTER SPACING === */
  --ls-tight: -0.04em;
  --ls-normal: 0;
  --ls-wide: 0.03em;
  --ls-tab: 0.5px;

  /* === GAPS === */
  --gap-xs: 8px;
  --gap-sm: 13px;
  --gap-md: 18px;
  --gap-lg: 40px;
  --gap-xl: 50px;
  --gap-section: 80px;

  /* === BORDER RADIUS === */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  --radius-xl: 11px;

  /* === Z-INDEX === */
  --z-header: 100;
  --z-drawer: 300;
  --z-overlay: 350;
  --z-modal: 400;

  /* === TRANSITIONS === */
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}