@font-face {
  font-family: 'Montserrat';
  src: url('/assets/public/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('/assets/public/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/public/fonts/Montserrat-Medium.woff2') format('woff2'),
       url('/assets/public/fonts/Montserrat-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/public/fonts/Montserrat-SemiBold.woff2') format('woff2'),
       url('/assets/public/fonts/Montserrat-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/assets/public/fonts/Montserrat-Bold.woff2') format('woff2'),
       url('/assets/public/fonts/Montserrat-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('/assets/public/fonts/Mulish-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('/assets/public/fonts/Mulish-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Mulish';
  src: url('/assets/public/fonts/Mulish-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ─── Colors ─── */
  --color-primary:          #ed2228;
  --color-primary-hover:    #f15156;
  --color-secondary:        #354053;
  --color-secondary-hover:  #2a3344;
  --color-accent:           #ed2228;
  --color-bg:               #ffffff;
  --color-surface:          #f5f5f5;
  --color-text:             #2e2e2e;
  --color-text-muted:       rgba(46, 46, 46, 0.5);
  --color-border:           #f5f7f7;
  --color-border-strong:    #e0e2e4;
  --color-danger:           #ed2228;
  --color-success:          #48943c;
  --color-success-bg:       #edf7ec;
  --color-warning:          #c97d10;
  --color-warning-bg:       #fff8ec;
  --color-info:             #1a6eb5;
  --color-info-bg:          #e8f2fb;

  /* product badges */
  --color-badge-sale:           #ffffff;
  --color-badge-sale-bg:        #ed2228;
  --color-badge-new:            #354053;
  --color-badge-new-bg:         #ebeef2;
  --color-badge-hit:            #ffffff;
  --color-badge-hit-bg:         #c97d10;
  --color-badge-novelty:        #ed2228;
  --color-badge-novelty-bg:     #ffffff;
  --color-badge-out-of-stock:   rgba(46, 46, 46, 0.5);
  --color-badge-out-of-stock-bg:#f5f5f5;

  /* ─── Typography ─── */
  --font-heading: 'Montserrat', sans-serif;
  --font-body:    'Mulish', sans-serif;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 18px;
  --text-md:   20px;
  --text-lg:   22px;
  --text-xl:   24px;
  --text-2xl:  28px;
  --text-3xl:  32px;
  --text-4xl:  38px;

  --weight-light:     300;
  --weight-regular:   400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;

  --tracking-tight:  -0.02em;
  --tracking-normal:  0em;
  --tracking-wide:    0.04em;
  --tracking-wider:   0.08em;

  /* ─── Spacing ─── */
  --space-0:  0px;
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ─── Border Radius ─── */
  --radius-none:   0px;
  --radius-sm:     3px;
  --radius-md:     5px;
  --radius-lg:     8px;
  --radius-xl:     12px;
  --radius-2xl:    16px;
  --radius-full:   9999px;
  --radius-button: 5px;
  --radius-card:   5px;
  --radius-badge:  3px;
  --radius-input:  5px;
  --radius-image:  5px;

  /* ─── Shadows ─── */
  --shadow-xs:   0 1px 2px rgba(50, 50, 50, 0.04);
  --shadow-sm:   1px 1px 3px rgba(50, 50, 50, 0.06);
  --shadow-md:   3px 3px 5px rgba(50, 50, 50, 0.08);
  --shadow-lg:   0 4px 12px rgba(50, 50, 50, 0.12);
  --shadow-xl:   0 8px 24px rgba(50, 50, 50, 0.15);
  --shadow-card: 3px 3px 5px rgba(50, 50, 50, 0.08);

  /* ─── Transitions ─── */
  --transition-fast: all 0.1s ease;
  --transition-base: all 0.15s ease;
  --transition-slow: all 0.25s ease;

  /* ─── Z-index ─── */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* ─── Layout ─── */
  --container-max:     1280px;
  --container-padding: var(--space-4);
  --sidebar-width:     290px;
  --grid-gap:          var(--space-5);
}