:root {
  /* Colors — base */
  --color-text: #1f1f1f;
  --color-text-secondary: #6f6f6f;
  --color-text-muted: #9a9a9a;
  --color-bg: #ffffff;
  --color-bg-soft: #f7f6f3;
  --color-bg-gray: #f2f2f2;
  --color-border: #e5e2dc;

  /* Colors — accent */
  --color-cta: #252525;
  --color-cta-hover: #111111;
  --color-wood: #b8895b;
  --color-orange: #f59a23;
  --color-green: #56b65d;
  --color-error: #d84a3a;

  /* Typography */
  --font-family: 'Manrope', 'Inter', Arial, sans-serif;
  --font-size-h1: clamp(2rem, 1.5rem + 1.5vw, 3rem);
  --font-size-h2: clamp(1.5rem, 1.2rem + 0.8vw, 2rem);
  --font-size-h3: clamp(1.125rem, 1rem + 0.3vw, 1.375rem);
  --font-size-body: 1rem;
  --font-size-small: 0.8125rem;
  --font-size-price: clamp(1.375rem, 1.2rem + 0.4vw, 1.625rem);
  --font-size-btn: 0.9375rem;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  /* Shadows */
  --shadow-card: 0 8px 24px rgba(31, 31, 31, 0.06);
  --shadow-hover: 0 14px 36px rgba(31, 31, 31, 0.1);

  /* Layout */
  --container-max: 1320px;
  --container-padding: 24px;
  --catalog-sidebar: 280px;
  --gap-catalog: 32px;
  --gap-grid: 24px;

  /* Transitions */
  --catalog-panel-gap: 10px;