:root {
  /* ========== Colors (Figma variables) ========== */
  --bg-main: #ffffff;
  --bg-base: #f6f6f6;
  --bg-dark: #2f3839;
  --bg-brand: #ffd331;
  --bg-surface: #d9d9d9;
  --bg-overlay: rgb(0 0 0 / 40%);
  --bg-glass: rgb(255 255 255 / 15%);

  --text-primary: #3b3b3c;
  --text-secondary: #848484;
  --text-tertiary: #a4a4a4;
  --text-white: #ffffff;
  --text-brand: #ffd331;
  --text-brand-heavy: #d5b02a;

  --buttons-main: #1c2324;

  --stroke-light: #dfdfdf;
  --stroke-primary: #3b3b3c;
  --stroke-secondary: #898989;
  --stroke-tertiary: #bcbcbc;

  /* ========== Radius (s / m / l / xl / xxl) ========== */
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 24px;
  --radius-xl: 32px;
  --radius-xxl: 48px;

  /* ========== Spacing (Figma semantic scale) ========== */
  --space-4: 0.4rem;   /* grey */
  --space-8: 0.8rem;   /* pink */
  --space-12: 1.2rem; /* blue */
  --space-16: 1.6rem; /* lightblue */
  --space-20: 2rem; /* yellow / wine */
  --space-24: 2.4rem; /* burgundy */
  --space-32: 3.2rem; /* mint */
  --space-40: 4rem; /* purple */
  --space-48: 4.8rem; /* darkblue */
  --space-64: 6.4rem;

  /* ========== Typography: Raleway, letterSpacing-0 ========== */
  --font: "Raleway", sans-serif;
  --fw-regular: 400;
  --fw-bold: 700;
  --ls: 0;

  /* Display — 1rem = 10px при 1800px */
  --fs-display: 6.4rem;
  --lh-display: 6.4rem;

  /* Header / H1 */
  --fs-h1: 4.8rem;
  --lh-h1: 6rem;

  /* Header / H2 */
  --fs-h2: 3.2rem;
  --lh-h2: 4rem;

  /* Header / H3 */
  --fs-h3: 2.8rem;
  --lh-h3: 3.2rem;

  /* Header / H4 */
  --fs-h4: 2.4rem;
  --lh-h4: 2.8rem;

  /* Header / H5 */
  --fs-h5: 2.2rem;
  --lh-h5: 2.4rem;

  /* Text / Text L */
  --fs-text-l: 1.8rem;
  --lh-text-l: 2.4rem;

  /* Text / Text M */
  --fs-text-m: 1.6rem;
  --lh-text-m: 2.2rem;

  /* Text / Text S */
  --fs-text-s: 1.4rem;
  --lh-text-s: 1.8rem;

  /* Description */
  --fs-desc: 1rem;
  --lh-desc: 1.2rem;
  --lx-desc: 1.4rem;
  --lhx-desc: 1.6rem;

  /* Filter chips / badges (шилдики) */
  --chip-h: 2.6rem;
  --chip-pad-x: 0.8rem;
  --fs-chip: 1.2rem;
  --lh-chip: 1.6rem;

  /* Layout — артборд inset 20px */
  --page-pad: 2rem;
  --gap: 2rem;

  /* Motion — Figma prototype Smart Animate */
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --dur-fast: 0.2s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
}

/*
  Планшет (Figma ~768, breakpoint ≤1100).
  html font-size фиксирован на 10px — rem больше не сжимается.
*/
@media (max-width: 1100px) {
  :root {
    --fs-display: 4.8rem;
    --lh-display: 4.8rem;

    --fs-h1: 4rem;
    --lh-h1: 4.8rem;

    --fs-h2: 2.8rem;
    --lh-h2: 3.6rem;

    --fs-h3: 2.4rem;
    --lh-h3: 2.8rem;

    --fs-h4: 2.2rem;
    --lh-h4: 2.8rem;

    --fs-h5: 2rem;
    --lh-h5: 2.4rem;

    --fs-text-l: 1.8rem;
    --lh-text-l: 2.4rem;

    --fs-text-m: 1.6rem;
    --lh-text-m: 2.2rem;

    --fs-text-s: 1.4rem;
    --lh-text-s: 1.8rem;

    --fs-desc: 1rem;
    --lh-desc: 1.2rem;

    --fs-chip: 1.2rem;
    --lh-chip: 1.6rem;
  }
}

/*
  Мобилка (Figma ~375, breakpoint ≤767).
*/
@media (max-width: 767px) {
  :root {
    --page-pad: 1.2rem;
    --gap: 1.2rem;

    --fs-display: 4rem;
    --lh-display: 4rem;

    --fs-h1: 4rem;
    --lh-h1: 4rem;

    /* Figma 375 Dev Mode resolved tokens */
    --fs-h2: 2.4rem;
    --lh-h2: 2.8rem;

    --fs-h3: 2.2rem;
    --lh-h3: 2.8rem;

    --fs-h4: 2rem;
    --lh-h4: 2.4rem;

    --fs-h5: 1.8rem;
    --lh-h5: 2rem;

    --fs-text-l: 1.6rem;
    --lh-text-l: 2.2rem;

    --fs-text-m: 1.6rem;
    --lh-text-m: 2.2rem;

    --fs-text-s: 1.2rem;
    --lh-text-s: 1.6rem;

    --fs-desc: 1rem;
    --lh-desc: 1rem;

    --fs-chip: 1.2rem;
    --lh-chip: 1.6rem;
  }
}