/* =====================================================================
   Design tokens — единственный источник значений для всего сайта.
   Под новую компанию правится прежде всего блок «Цвет» ниже: --color-accent
   (кнопки и ссылки), --color-accent-on-dark, --color-dark и --color-brand-lime.
   Остальные значения (сетка, типографика, тени, движение) обычно менять не нужно.
   ===================================================================== */

/* E-Toimisto: yksi groteski (Plus Jakarta Sans, SIL OFL) otsikoihin ja tekstiin – ei antiikvaa */
/* Kyrillinen osa (venäjänkielinen sivusto): Manrope (SIL OFL), muodoltaan lähellä Plus Jakarta Sansia */
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/assets/fonts/manrope-cyrillic-wght-normal.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal; font-display: swap; font-weight: 200 800;
  src: url("/assets/fonts/manrope-cyrillic-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.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;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url("/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Метрически подогнанный fallback — без скачка текста при загрузке шрифта */
@font-face {
  font-family: "Jakarta Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 104%;
  ascent-override: 98%;
  descent-override: 21%;
  line-gap-override: 0%;
}

:root {
  /* ---------- Цвет ---------- */
  --color-bg: #fbfaf6;            /* lämmin «paperi» */
  --color-surface: #f2f0e8;          /* серые карточки и полосы (как #F3F3F3 у reference) */
  --color-surface-strong: #e6e3d7;
  --color-ink: #10231a;              /* заголовки */
  --color-text: #3f4a43;             /* основной текст (8.3:1 на белом) */
  --color-muted: #5f6a62;            /* подписи (5.5:1 на белом, 5:1 на surface) */
  --color-line: #e2dfd3;
  --color-line-strong: #c9c5b5;
  --color-dark: #10291c;             /* syvä metsänvihreä: tummat pinnat */             /* графит логотипа: тёмные плоскости, подложка hero */
  --color-dark-2: #17352a;
  --color-on-dark: #ffffff;
  --color-on-dark-muted: rgb(255 255 255 / 0.78);
  /* Pohjan arvot; E-Toimiston värit ylikirjoitetaan teema.css:ssä */
  --color-brand-lime: #cefa67;       /* только блики и мелкие акценты на тёмном */
  --color-accent: #2e7a0d;           /* кнопки, ссылки, акцентные слова: 5.6:1 с белым */
  --color-accent-strong: #245f0a;    /* 7.7:1 с белым */
  --color-accent-on-dark: #8fd65c;   /* акцент на тёмном фоне/фото: 11:1 на графите */
  --color-accent-soft: #e8f3e0;
  --color-whatsapp: #1f8f4e;         /* фон кнопки WhatsApp: 4.1:1 с белой иконкой (для иконок нужно ≥ 3:1) */
  --color-focus: #1d6fd6;            /* синий фокус отличим от зелёного акцента */
  --color-danger: #b3261e;
  --color-danger-soft: #fdecea;
  --color-success: #1e6b3a;
  --color-success-soft: #e4f3e8;
  --color-warning: #8a5300;
  --color-warning-soft: #fdf1dc;
  --color-overlay: rgb(12 33 22 / 0.72);
  /* Один overlay hero: затемнение под текст + тонкий зелёный свет из угла (в одном background) */
  --hero-overlay:
    radial-gradient(55% 90% at 0% 100%, rgb(51 134 15 / 0.34) 0%, transparent 70%),
    linear-gradient(90deg, rgb(12 33 22 / 0.88) 0%, rgb(12 33 22 / 0.62) 45%, rgb(12 33 22 / 0.3) 100%);
  --hero-overlay-mobile:
    radial-gradient(90% 55% at 0% 100%, rgb(51 134 15 / 0.3) 0%, transparent 70%),
    linear-gradient(180deg, rgb(12 33 22 / 0.5) 0%, rgb(12 33 22 / 0.8) 65%, rgb(12 33 22 / 0.92) 100%);
  /* Тёмные поверхности (шапка, меню, CTA, подвал): светлая кромка + слабый внутренний блик */
  --edge-on-dark: rgb(255 255 255 / 0.1);
  --highlight-on-dark: inset 0 1px 0 rgb(255 255 255 / 0.07);
  --cta-bg: radial-gradient(120% 160% at 100% 0%, rgb(51 134 15 / 0.42) 0%, transparent 55%), var(--color-dark);

  /* ---------- Типографика ---------- */
  --font-sans: "Plus Jakarta Sans", "Jakarta Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: var(--font-sans); /* yhteensopivuus: pohjan säännöt viittaavat tähän */
  --fs-xs: 0.8125rem;                                    /* 13 */
  --fs-sm: 0.9375rem;                                    /* 15 */
  --fs-base: 1rem;                                       /* 16 — как у reference */
  --fs-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);    /* 17 → 19 */
  --fs-h4: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); /* 18 → 21 */
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.75rem);      /* 20 → 28 */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.5vw, 2.1875rem);   /* 26 → 35 — H2 reference 35px */
  --fs-h1: clamp(1.75rem, 1.2rem + 2.9vw, 3.25rem);      /* 28 → 52: pisimmät suomen sanat mahtuvat 320 px:ssä ilman tavutusta */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.65;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --tracking-tight: -0.02em;
  --tracking-caps: 0.12em;
  --measure: 68ch;

  /* ---------- Раскладка ---------- */
  --container: 1290px;               /* ширина контента reference ≈ 1290 */
  --gutter: clamp(16px, 4.5vw, 64px);
  --grid-gap: clamp(16px, 2vw, 24px);
  --header-h: 72px;

  /* ---------- Отступы (шаг 4px) ---------- */
  --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;
  --space-section: clamp(3.25rem, 2.4rem + 4vw, 6rem);
  --space-stack: clamp(2rem, 1.5rem + 2vw, 3.5rem);

  /* ---------- Формы ---------- */
  /* Скругления — иерархия от мелкого к крупному */
  --radius-sm: 10px;                 /* мелкие элементы: иконки-плашки, метки */
  --radius-control: 8px;            /* кнопки, поля, чипы, переключатель меню */
  --radius-card: 10px;               /* карточки услуг и небольшие карточки: работы, контакты, принципы */
  --radius-lg: 14px;                 /* крупные фото и контентные блоки */
  --radius-xl: 18px;                 /* большие CTA-панели, форма, карта */
  --radius-round: 999px;             /* круглые кнопки телефона/WhatsApp и иконки */
  --control-h: 52px;                 /* кнопки и поля; мин. область нажатия 44px */
  --tap-min: 44px;

  /* ---------- Глубина: 4 уровня, многослойные мягкие тени с низкой непрозрачностью ---------- */
  --shadow-1: 0 1px 2px rgb(22 25 23 / 0.05), 0 2px 8px -2px rgb(22 25 23 / 0.06);                                  /* поля, мелкие элементы */
  --shadow-2: 0 1px 2px rgb(22 25 23 / 0.04), 0 4px 10px -4px rgb(22 25 23 / 0.06), 0 16px 36px -14px rgb(22 25 23 / 0.14); /* карточки */
  --shadow-3: 0 2px 4px rgb(22 25 23 / 0.04), 0 10px 20px -8px rgb(22 25 23 / 0.08), 0 30px 60px -22px rgb(22 25 23 / 0.24); /* карточка при наведении, форма */
  --shadow-4: 0 4px 10px -4px rgb(12 14 13 / 0.14), 0 24px 48px -18px rgb(12 14 13 / 0.3), 0 48px 100px -40px rgb(12 14 13 / 0.36); /* CTA-панели, диалоги */
  /* primary: верхний блик + мягкая тень с едва заметным зелёным оттенком (единственный «glow» на сайте) */
  --shadow-btn: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 1px 2px rgb(22 25 23 / 0.12), 0 8px 20px -8px rgb(62 94 25 / 0.5);
  --shadow-btn-hover: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 2px 4px rgb(22 25 23 / 0.12), 0 14px 28px -10px rgb(62 94 25 / 0.55);
  --shadow-float: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 4px 10px rgb(22 25 23 / 0.12), 0 12px 28px -8px rgb(22 25 23 / 0.3); /* плавающие кнопки */
  --shadow-float-hover: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 6px 14px rgb(22 25 23 / 0.14), 0 18px 36px -10px rgb(22 25 23 / 0.34);
  --ring: 0 0 0 4px rgb(29 111 214 / 0.18);                                                /* активное поле */
  --ring-danger: 0 0 0 4px rgb(179 38 30 / 0.12);

  /* ---------- Пропорции медиа ---------- */
  --ratio-service: 6 / 5;            /* карточка услуги (410×350 у reference) */
  --ratio-reference: 4 / 3;
  --ratio-portrait: 4 / 5;
  --ratio-wide: 16 / 9;
  --ratio-block: 4 / 3;
  --ratio-gallery: 3 / 2;

  /* ---------- Движение ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-press: 120ms;
  --dur-hover: 180ms;                /* быстрые состояния: кнопки, ссылки, поля */
  --dur-card: 280ms;                 /* карточки и крупные элементы */
  --dur-reveal: 600ms;
  --reveal-distance: 20px;
  --reveal-stagger: 70ms;
  --lift-button: -2px;
  --lift-card: -5px;
  --media-zoom: 1.03;
  --arrow-shift: 4px;

  /* ---------- Слои ---------- */
  --z-header: 50;
  --z-float: 45;
  --z-menu: 60;
  --z-dialog: 80;
  --z-toast: 90;

  /*
    Адаптивные точки (контракт; в @media переменные недоступны):
      480px — крупный телефон · 768px — планшет · 1024px — навигация в строку · 1280px — десктоп
    Сетки реагируют на ширину своего контейнера: <560 → 1 кол., ≥560 → 2, ≥900 → 3.
  */
}

@media (min-width: 1024px) {
  :root { --header-h: 88px; }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-hover: 1ms;
    --dur-card: 1ms;
    --dur-reveal: 1ms;
    --dur-press: 1ms;
    --reveal-distance: 0px;
    --reveal-stagger: 0ms;
    --lift-button: 0px;
    --lift-card: 0px;
    --media-zoom: 1;
    --arrow-shift: 0px;
  }
}