/* ==========================================================================
   Wyceny specjalistyczne – tokeny projektu
   Paleta pochodzi z valor.com.pl (logo + CSS + hero). Font: Roboto (jak na valor.com.pl).
   ========================================================================== */

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/roboto-300.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/roboto-regular.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/roboto-500.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/roboto-700.woff2") format("woff2");
}

:root {
  /* Kolory marki */
  --navy: #022b3f;          /* ciemny granat/petrol – tła ciemne, nagłówki */
  --navy-deep: #01202f;     /* stopka */
  --blue: #036d87;          /* niebieski – przyciski, linki */
  --blue-dark: #025a70;     /* hover przycisków */
  --teal: #088e9a;          /* turkus – detale, linie (nie tekst na bieli) */
  --teal-light: #b0ddd8;    /* jasny turkus – akcenty */

  /* Tła i linie */
  --white: #ffffff;
  --tint: #eaf4f6;          /* bardzo jasny błękit – naprzemienne sekcje */
  --tint-2: #f4f8f9;        /* jeszcze jaśniejszy */
  --icon-bg: #e1f0ef;       /* pojemnik ikony (jasny turkus ~35%) */
  --line: #dde7ea;
  --line-strong: #b9c9cf;

  /* Tekst */
  --text: #2e3438;          /* grafit */
  --text-2: #56626a;        /* drugorzędny (kontrast ≥ 5:1 na bieli) */
  --on-dark: #ffffff;
  --on-dark-2: #c9dae1;     /* tekst pomocniczy na ciemnym tle */
  --on-dark-3: #9db8c3;

  --error: #b42318;

  /* Typografia */
  --font: "Roboto", -apple-system, "Segoe UI", Arial, sans-serif;
  --fs-body: 1.0625rem;     /* 17 px */
  --fs-lead: 1.25rem;       /* 20 px */
  --fs-small: 0.9375rem;    /* 15 px */
  --fs-fine: 0.875rem;      /* 14 px – wyłącznie drobny druk */

  /* Układ */
  --container: 1200px;
  --container-wide: 1400px;
  --gutter: 24px;
  --header-h: 76px;
  --sticky-h: 76px;
  --radius: 8px;
  --radius-lg: 12px;
  --shadow: 0 1px 2px rgba(2, 43, 63, 0.05), 0 8px 24px rgba(2, 43, 63, 0.06);
  --shadow-hover: 0 2px 4px rgba(2, 43, 63, 0.06), 0 12px 32px rgba(2, 43, 63, 0.1);

  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (max-width: 899px) {
  :root {
    --gutter: 18px;
    --header-h: 64px;
    --fs-body: 1.0625rem;
    --fs-lead: 1.125rem;
  }
}