/* ================================
   CSS VARIABLES
================================ */

:root {
  /* Colors */
  --color-white: #ffffff;
  --color-black: #111111;

  --color-text: #310f3b;
  --color-text-muted: #57606f;
  --color-accent: #6a4d67;
  --color-accent-dark: #372237;
  --color-accent-soft: #735675;
  --color-accent-red: #d34242;
  --color-accent-purple: #793877;

  --color-bg-light: #f7f1eb;
  --color-bg-soft: #f5f6fa;

  /* Gradient */
  --gradient-link: linear-gradient(
    to right,
    rgb(51, 15, 64),
    rgb(55, 34, 55) 50%,
    rgb(115, 86, 117) 50%
  );

  /* Typography */
  --font-main: "Manrope", Arial, sans-serif;
  --fs-8: 0.5rem; /* 8px */
  --fs-10: 0.625rem; /* 10px */
  --fs-11: 0.6875rem; /*11px*/
  --fs-12: 0.75rem; /* 12px */
  --fs-13: 0.8125rem; /* 13px */
  --fs-14: 0.875rem; /* 14px */
  --fs-15: 0.9375rem; /* 15px */
  --fs-16: 1rem; /* 16px */
  --fs-18: 1.125rem; /* 18px */
  --fs-20: 1.25rem; /* 20px */
  --fs-22: 1.375rem; /* 22px */
  --fs-24: 1.5rem; /* 24px */
  --fs-28: 1.75rem; /* 28px */
  --fs-32: 2rem; /* 32px */
  --fs-40: 2.5rem; /* 40px */
  --fs-48: 3rem; /* 48px */
  --fs-64: 4rem; /* 64px */

  /* Layout */
  --container: 1640px;
  --container-padding: 24px;

  --header-height: 70px;
  --header-categories-height: 52px;
  --header-mobile-height: 60px;

  /* Radius */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Transitions */
  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-link: 275ms ease;
}

:root {
  --lm-bg: #f8f3ee;
  --lm-bg-soft: #fbf7f2;
  --lm-card: #ffffff;
  --lm-text: #2f292d;
  --lm-muted: #7e727a;
  --lm-muted-2: #a8999f;
  --lm-line: rgba(106, 77, 103, 0.14);
  --lm-accent: #6a4d67;
  --lm-accent-dark: #4f354c;
  --lm-accent-soft: #efe5ec;
  --lm-green: #3f8f61;
  --lm-green-bg: #eaf7ef;
  --lm-red: #a64646;
  --lm-red-bg: #f8eeee;
  --lm-shadow: 0 24px 70px rgba(72, 46, 62, 0.11);
  --lm-shadow-soft: 0 14px 34px rgba(72, 46, 62, 0.08);
  --lm-radius-xl: 2rem;
  --lm-radius-lg: 1.5rem;
  --lm-radius-md: 1.125rem;
  --lm-radius-sm: 0.75rem;
}

/* ================================
   GLOBAL SCROLLBAR
================================ */

:root {
  --scrollbar-size: 0.625rem;
  --scrollbar-track: var(--color-bg-soft);
  --scrollbar-thumb: rgba(106, 77, 103, 0.78);
  --scrollbar-thumb-hover: var(--color-accent);
}

/* Firefox */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}

::-webkit-scrollbar-thumb {
  border: 0.1875rem solid var(--scrollbar-track);
  border-radius: var(--radius-pill);
  background: var(--scrollbar-thumb);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
@media (max-width: 1024px) {
  :root {
    --container-padding: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --container-padding: 12px;
  }
}

@media (max-width: 425px) {
  :root {
    --container-padding: 10px;
  }
}