/* ============================================================
   tokens.css — дизайн-токены «Наливные системы»
   Направление: бетон + заливка — холодный графит, медь заливки,
   стальной акцент доверия. Шрифты: Barlow Condensed + Figtree + IBM Plex Mono.
   ============================================================ */
:root {
  /* --- Цвета: примитивы --- */
  --c-ink-900: #0c1219;
  --c-ink-850: #131a24;
  --c-ink-800: #1a2330;
  --c-ink-700: #273244;
  --c-slate-500: #5c6b7a;
  --c-slate-400: #8b9aab;
  --c-slate-300: #c5ced8;
  --c-slate-200: #dfe5ec;
  --c-slate-100: #e8edf2;
  --c-surface: #eef1f4;
  --c-white: #ffffff;

  /* --- Семантические цвета --- */
  --color-bg: var(--c-surface);
  --color-surface: var(--c-white);
  --color-surface-alt: var(--c-slate-100);
  --color-dark: var(--c-ink-900);
  --color-dark-2: var(--c-ink-850);
  --color-dark-surface: var(--c-ink-800);
  --color-dark-surface-2: var(--c-ink-700);

  --color-text: #121820;
  --color-text-muted: var(--c-slate-500);
  --color-text-inverted: #f0f4f8;
  --color-text-inverted-muted: #93a4b5;

  --color-primary: #e35b00;        /* медь заливки / CTA */
  --color-primary-hover: #cc5000;
  --color-primary-active: #a34100;
  --color-primary-soft: #fff0e6;
  --color-primary-glow: rgba(227, 91, 0, 0.4);

  --color-accent: #e8a820;         /* янтарь — глянец / цифры */
  --color-accent-soft: #fff6db;

  --color-trust: #3d7a8c;          /* сталь — доверие / вторичные акценты */
  --color-trust-soft: #e4f1f4;

  --color-success: #168a45;
  --color-success-soft: #dcfce7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;

  --color-border: #d5dde6;
  --color-border-strong: #b8c4d1;
  --color-border-dark: rgba(147, 164, 181, 0.16);

  /* --- Типографика --- */
  --font-display: 'Barlow Condensed', 'Figtree', sans-serif;
  --font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Модульная шкала */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.35rem;
  --fs-4xl: 3.15rem;
  --fs-5xl: 4rem;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-tight: 1.05;
  --lh-snug: 1.25;
  --lh-normal: 1.6;
  --lh-relaxed: 1.75;

  /* --- Отступы (8px ритм) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;

  /* --- Радиусы (чуть жёстче — индустриально) --- */
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* --- Тени --- */
  --shadow-xs: 0 1px 2px rgba(12, 18, 25, 0.06);
  --shadow-sm: 0 2px 6px rgba(12, 18, 25, 0.07), 0 1px 2px rgba(12, 18, 25, 0.04);
  --shadow-md: 0 8px 24px rgba(12, 18, 25, 0.1), 0 2px 6px rgba(12, 18, 25, 0.05);
  --shadow-lg: 0 18px 48px rgba(12, 18, 25, 0.14), 0 6px 14px rgba(12, 18, 25, 0.06);
  --shadow-orange: 0 10px 28px rgba(227, 91, 0, 0.32);
  --shadow-inset-gloss: inset 0 1px 0 rgba(255, 255, 255, 0.16);

  /* --- Layout --- */
  --container-max: 1280px;
  --container-pad: 1.25rem;
  --header-h: 72px;

  /* --- Анимации --- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pour: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast: 150ms;
  --dur: 240ms;
  --dur-slow: 420ms;

  /* --- z-index --- */
  --z-header: 100;
  --z-dropdown: 110;
  --z-sticky: 90;
  --z-modal-overlay: 1000;
  --z-modal: 1010;
  --z-toast: 1100;
  --z-fab: 80;
}

/* ===== Брейкпоинты для справки =====
   мобильные: < 768px (базовые стили)
   планшет:   768px+
   десктоп:   1024px+
   широкий:   1280px+
   ================================== */