/* ============================================================
   SMOEM.KZ — Design Tokens
   Единый источник правды для дизайн-системы.
   Меняя переменные здесь, вы меняете стиль всего сайта.
   ============================================================ */

/* Manrope — local WOFF2 (also in fonts.css for legacy URL hits) */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-cyrillic-ext.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/assets/fonts/manrope/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

:root {
  /* ---------- Цвета: фирменная палитра ----------
     Промышленная химия / европейский производитель:
     глубокий стальной синий (доверие, инженерность)
     + янтарный акцент (энергия, высокая конверсия CTA). */

  --c-ink-900: #0a1a2f;   /* базовый тёмный (заголовки, шапка) */
  --c-ink-800: #10233d;
  --c-ink-700: #17304f;

  --c-brand-700: #0f3f80;
  --c-brand-600: #1256b0;  /* основной бренд-синий */
  --c-brand-500: #1e6fd9;
  --c-brand-100: #e7f0fc;
  --c-brand-050: #f2f7fe;

  --c-accent-700: #cc4d00;
  --c-accent-600: #ff6a1a;  /* CTA / акцент */
  --c-accent-500: #ff8642;
  --c-accent-100: #fff0e6;

  --c-success-600: #12855a;
  --c-success-100: #e4f6ee;
  --c-warning-600: #b7791f;
  --c-warning-100: #fdf3e0;
  --c-danger-600:  #c0392b;

  /* Нейтральные (тёплый серый) */
  --c-white:  #ffffff;
  --c-gray-50:  #f7f8fa;
  --c-gray-100: #eef1f5;
  --c-gray-200: #e2e7ee;
  --c-gray-300: #cdd5e0;
  --c-gray-400: #a4afc0;
  --c-gray-500: #74839a;
  --c-gray-600: #566175;
  --c-gray-700: #3c4658;
  --c-gray-800: #263041;

  /* Семантические токены (используем в компонентах) */
  --color-bg: var(--c-white);
  --color-bg-subtle: var(--c-gray-50);
  --color-bg-muted: var(--c-gray-100);
  --color-surface: var(--c-white);
  --color-surface-dark: var(--c-ink-900);

  --color-text: var(--c-ink-900);
  --color-text-soft: var(--c-gray-600);
  --color-text-muted: var(--c-gray-600);
  --color-text-invert: var(--c-white);

  --color-border: var(--c-gray-200);
  --color-border-strong: var(--c-gray-300);

  --color-primary: var(--c-brand-600);
  --color-primary-hover: var(--c-brand-700);
  --color-accent: var(--c-accent-600);
  --color-accent-hover: var(--c-accent-700);

  --color-focus: var(--c-brand-500);

  /* ---------- Типографика ----------
     Крупная типографика, современная геометрическая гарнитура. */
  --font-sans: "Manrope", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Manrope", var(--font-sans);

  /* Модульная шкала (clamp = адаптив без media-query) */
  --fs-display: clamp(2.05rem, 1.1rem + 4.2vw, 4.25rem);
  --fs-h1: clamp(1.6rem, 1rem + 3vw, 3.5rem);
  --fs-h2: clamp(1.6rem, 1.2rem + 2vw, 2.5rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 1vw, 1.75rem);
  --fs-h4: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.9375rem;
  --fs-xs: 0.875rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-normal: 1.6;

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

  --tracking-tight: -0.02em;
  --tracking-wide: 0.04em;
  --tracking-caps: 0.08em;

  /* ---------- Пространство (8pt grid) ---------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Вертикальный ритм секций */
  --section-y: clamp(3.5rem, 2rem + 6vw, 7rem);

  /* ---------- Контейнеры ---------- */
  --container-max: 1280px;
  --container-wide: 1440px;
  --container-narrow: 820px;
  --gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);

  /* ---------- Радиусы ---------- */
  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-pill: 999px;

  /* ---------- Тени (слоистые = ощущение глубины и премиальности) ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 26, 47, 0.05);
  --shadow-sm: 0 1px 2px rgba(10, 26, 47, 0.04), 0 3px 8px rgba(10, 26, 47, 0.05);
  --shadow-md: 0 2px 6px rgba(10, 26, 47, 0.05), 0 12px 28px rgba(10, 26, 47, 0.08);
  --shadow-lg: 0 6px 18px rgba(10, 26, 47, 0.08), 0 28px 56px rgba(10, 26, 47, 0.12);
  --shadow-brand: 0 6px 14px rgba(18, 86, 176, 0.14), 0 14px 30px rgba(18, 86, 176, 0.2);
  --shadow-accent: 0 6px 14px rgba(255, 106, 26, 0.18), 0 14px 30px rgba(255, 106, 26, 0.26);

  /* ---------- Анимации ---------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.16s;
  --dur: 0.24s;
  --dur-slow: 0.4s;

  /* ---------- Слои ---------- */
  --z-header: 100;
  --z-dropdown: 200;
  --z-drawer: 300;
  --z-modal: 400;
  --z-toast: 500;
}