/* tokens.css — дизайн-система: белый + инженерный графит */

:root {
  /* ── Поверхности ─────────────────────────────── */
  --paper:        #FFFFFF;   /* основной фон */
  --paper-2:      #F4F4F1;   /* тёплый off-white для чередования секций */
  --graphite-900: #15171B;   /* почти-чёрный графит: тёмные блоки, заголовки */
  --graphite-800: #1C1F24;
  --graphite-700: #2A2E35;
  --graphite-500: #565b64;

  /* ── Текст ───────────────────────────────────── */
  --ink:           #191B1F;  /* основной текст на белом */
  --muted:         #6A6F78;  /* приглушённый */
  --invert:        #F1F1EE;  /* текст на графите */
  --invert-muted:  #A6AAB2;

  /* ── Линии (хайрлайны) ───────────────────────── */
  --line:         #E6E6E1;
  --line-2:       #D6D6D0;
  --line-invert:  rgba(255,255,255,.12);

  /* ── Акценты вода / ток (дозированно) ────────── */
  --water:        #1C86C4;   /* сантехника */
  --water-ink:    #0F6DA6;
  --current:      #E8951B;   /* электрика */
  --current-ink:  #C97B0A;
  --success:      #2E9E63;

  /* ── Радиусы — сдержанные, архитектурные ─────── */
  --r-xs: 3px;  --r-sm: 6px;  --r-md: 10px;  --r-lg: 14px;

  /* ── Тени — почти нет, только для фото/оверлеев ─ */
  --shadow-sm: 0 1px 2px rgba(20,22,26,.06);
  --shadow-md: 0 24px 60px -28px rgba(20,22,26,.28);

  /* ── Сетка / ритм ────────────────────────────── */
  --container: 1240px;
  --gutter: 28px;
  --section-y: clamp(72px, 10vw, 150px);

  /* ── Шрифты ──────────────────────────────────── */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Manrope', system-ui, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --header-h: 76px;

  /* ── Алиасы для обратной совместимости (заглушки) ─ */
  --surface: var(--paper-2);
  --white: var(--paper);
  --text: var(--ink);
  --text-muted: var(--muted);
  --text-invert: var(--invert);
  --text-invert-muted: var(--invert-muted);
  --border-light: var(--line);
  --border-dark: var(--line-invert);
  --ink-900: var(--graphite-900);
  --ink-800: var(--graphite-800);
  --water-600: var(--water-ink);
  --current-600: var(--current-ink);
  --r-pill: 999px;
}