/* ===== Design tokens – Алматы Строй Сервис =====
   Источник: 03_КОНЦЕПЦИЯ.md v3
   Палитра: warm cream + terracotta (light premium)
   Шрифты:  Manrope (display) + Inter (body) */

:root {
  /* Поверхности */
  --bg:          #F7F4EE;
  --bg-soft:     #EFEAE0;
  --bg-card:     #FFFFFF;
  --bg-deep:     #1A1A1A;

  /* Текст */
  --ink:         #1A1A1A;
  --ink-2:       #5A5A55;
  --ink-mute:    #9A958C;
  --ink-on-dark: #F7F4EE;

  /* Акцент */
  --accent:      #C8512E;
  --accent-dk:   #8E3A1E;
  --accent-soft: #F4E4DA;
  --accent-on:   #FFFFFF;

  /* Утилитарные */
  --line:        #E8E2D7;
  --line-strong: #C9C2B5;
  --success:     #5C7C5A;
  --warning:     #C68A4D;
  --error:       #B33A2C;

  /* Полупрозрачные */
  --overlay-cream: rgba(247, 244, 238, 0.85);
  --overlay-dark:  rgba(26, 26, 26, 0.55);

  /* RGB-производные */
  --accent-rgb:  200, 81, 46;
  --ink-rgb:     26, 26, 26;
  --bg-rgb:      247, 244, 238;

  /* Шрифты */
  --font-display: 'Manrope', 'Helvetica Neue', system-ui, sans-serif;
  --font-sans:    'Inter', 'Helvetica Neue', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  /* Размеры */
  --fs-h1:      clamp(40px, 6vw, 84px);
  --fs-h2:      clamp(32px, 4.5vw, 60px);
  --fs-h3:      clamp(22px, 2.5vw, 32px);
  --fs-h4:      clamp(18px, 1.6vw, 22px);
  --fs-lead:    clamp(17px, 1.4vw, 20px);
  --fs-body:    16px;
  --fs-small:   14px;
  --fs-meta:    13px;
  --fs-counter: clamp(56px, 9vw, 128px);

  /* Line-heights */
  --lh-tight:   1.05;
  --lh-display: 1.15;
  --lh-body:    1.55;
  --lh-ui:      1.3;

  /* Letter-spacing */
  --tr-tight:   -0.02em;
  --tr-normal:  0;
  --tr-wide:    0.02em;
  --tr-pill:    0.06em;

  /* Скругления */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-2xl:  48px;
  --r-pill: 999px;

  /* Тени (нейтральные, без цвета) */
  --sh-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 1px 1px rgba(26, 26, 26, 0.03);
  --sh-md: 0 4px 12px rgba(26, 26, 26, 0.06), 0 2px 4px rgba(26, 26, 26, 0.04);
  --sh-lg: 0 12px 32px rgba(26, 26, 26, 0.08), 0 4px 12px rgba(26, 26, 26, 0.05);
  --sh-xl: 0 24px 64px rgba(26, 26, 26, 0.12), 0 8px 16px rgba(26, 26, 26, 0.06);
  --sh-inset: inset 0 2px 4px rgba(26, 26, 26, 0.06);

  /* Spacing */
  --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;

  --space-section:  clamp(64px, 8vw, 120px);
  --space-block:    clamp(40px, 5vw, 64px);
  --space-pad-x:    clamp(20px, 5vw, 80px);

  --container:        1400px;
  --container-narrow: 960px;
  --container-wide:   1600px;

  /* Z-index */
  --z-base:      0;
  --z-elev:      10;
  --z-sticky:    100;
  --z-cookie:    200;
  --z-stickybar: 300;
  --z-fab:       400;
  --z-overlay:   500;
  --z-modal:     600;
  --z-toast:     700;
  --z-tooltip:   800;

  /* Motion */
  --t-fast:    120ms;
  --t-base:    200ms;
  --t-slow:    320ms;
  --t-slower:  500ms;
  --t-reveal:  700ms;

  --e-out:     cubic-bezier(0.22, 1, 0.36, 1);
  --e-in-out:  cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring:  cubic-bezier(0.34, 1.56, 0.64, 1);
}