/* ==========================================================================
   Tokeny stylu „Dialog” (źródło: WWW/wzór/variables.css, tokens.json, DESIGN (1).md)
   Poprawki względem wzoru:
   - --section-gap i --element-gap były zakresami („80-120px”), czyli niepoprawnym CSS.
     Zamienione na clamp().
   - --font-display: PP Radio Grotesk jest płatny, więc zamiennik (Satoshi / DM Sans),
     jak podaje sam Refero.
   Aliasy semantyczne (--bg, --ink, --accent…) są niżej. Sekcje używają ALIASÓW,
   nie surowych nazw kolorów, żeby ciemny kontekst (.is-dark) mógł je nadpisać.
   ========================================================================== */
:root {
  /* Kolory: surowe */
  --color-tangerine-tag: #f69251;
  --color-midnight-ink: #1c1714;   /* 27.09: kawowa czerń zamiast granatu Dialogu (zgodna z hero i zdjęciami) */
  --color-graphite: #4d4640;
  --color-deep-slate: #27201b;     /* 27.09: kawa zamiast granatowego łupka */
  --color-carbon: #000000;
  --color-stone: #636363;
  --color-pebble: #949494;
  --color-ash: #8b8b8b;
  --color-fog: #f7f7f7;
  --color-snow: #ffffff;
  --color-peach-whisper: #fad7c1;
  --gradient-peach-whisper: linear-gradient(rgba(255, 219, 184, 0.06) 0%, rgba(255, 255, 255, 0.03) 100%);
  --color-dusty-rose: #c97b84;

  /* Fonty */
  --font-display: 'Satoshi', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-weight-display: 300; /* „Light”: w Dialogu nagłówki są cienkie */
  --font-weight-regular: 400;
  --font-weight-medium: 500;

  /* Skala typograficzna (wzór) */
  --text-caption: 12px;   --leading-caption: 1.2;
  --text-small: 14px;     --leading-small: 1.45;
  --text-body: 16px;      --leading-body: 1.5;
  --text-subheading: 18px; --leading-subheading: 1.45;
  --text-heading-sm: 24px; --leading-heading-sm: 1.33;
  --text-heading: 32px;   --leading-heading: 1.3;  --tracking-heading: -0.01em;
  --text-heading-md: 39px; --leading-heading-md: 1.2;
  --text-heading-lg: 50px; --leading-heading-lg: 1.2; --tracking-heading-lg: -0.01em;
  --text-display: 70px;   --leading-display: 1.15; --tracking-display: -0.01em;
  --tracking-body: -0.01em;
  --tracking-small: -0.02em;

  /* Odstępy (siatka 4 px) */
  --spacing-4: 4px;   --spacing-8: 8px;   --spacing-12: 12px; --spacing-16: 16px;
  --spacing-20: 20px; --spacing-24: 24px; --spacing-32: 32px; --spacing-40: 40px;
  --spacing-48: 48px; --spacing-64: 64px; --spacing-72: 72px; --spacing-80: 80px;
  --spacing-96: 96px; --spacing-128: 128px; --spacing-160: 160px; --spacing-192: 192px;

  /* Układ */
  --page-max-width: 1200px;
  --gutter: 16px;                                   /* telefon; niżej 24/32 */
  --section-gap: clamp(80px, 10vw, 120px);          /* wzór: 80–120px */
  --element-gap: clamp(8px, 1.2vw, 16px);           /* wzór: 8–16px */
  --card-padding: 24px;

  /* Promienie (nazwane role z wzoru) */
  --radius-small: 8px;
  --radius-cardinner: 12px;
  --radius-cards: 24px;
  --radius-buttons: 28px;
  --radius-overlays: 32px;
  --radius-badges: 100px;
  --radius-inputs: 0px;

  /* Cienie: płaskie, nigdy > 8px blur i > 0.12 krycia (zasada wzoru) */
  --shadow-subtle: rgba(28, 23, 20, 0.12) 0px 2px 3px -2px;
  --shadow-subtle-2: rgba(0, 0, 0, 0.04) 0px 1px 2px 0px, rgba(0, 0, 0, 0.02) 0px 2px 4px 0px, rgba(0, 0, 0, 0.02) 0px 4px 8px 0px;
  --shadow-fade-up: rgba(247, 247, 247, 0.5) 0px -40px 40px 0px;

  /* Ruch */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 180ms;
  --dur: 420ms;
  --dur-slow: 800ms;

  /* Wysokość przyklejonej nawigacji (+ pasek postępu), do scroll-margin */
  --nav-h: 72px;

  /* ---- Aliasy semantyczne: JASNY kontekst (domyślny) ---- */
  --bg: var(--color-fog);              /* tło strony */
  --surface: var(--color-snow);        /* karty, nav */
  --surface-2: #fbfbfb;                /* karta w karcie (delikatnie) */
  --ink: var(--color-midnight-ink);    /* tekst, obramowania */
  --ink-strong: var(--color-carbon);   /* nagłówki */
  --ink-2: var(--color-graphite);      /* tekst drugorzędny */
  --ink-3: var(--color-stone);         /* metki, nav */
  --ink-4: #6b6b6b;                    /* najsłabszy tekst: 4,97:1 na #f7f7f7 (AA). Pebble #949494 = 3:1, tylko dekoracja */
  --line: rgba(28, 23, 20, 0.08);      /* cienkie linie */
  --line-strong: rgba(28, 23, 20, 0.16);
  --accent-text-strong: #9a4f1c;      /* tekst na jasnopomarańczowym tle (pigułki): ≥ 5,5:1 */
  --accent-text: #b0561b;             /* pomarańcz jako TEKST na jasnym tle: 5,0:1 (AA), audyt 30.09 */
  --accent: var(--color-tangerine-tag);/* TYLKO przyciski CTA */
  --accent-hover: #f7a167;
  --on-accent: var(--color-midnight-ink); /* tekst na pomarańczu: 7,6:1 (biały miałby 2,3:1) */
  --focus: var(--color-midnight-ink);
  --glow: rgba(246, 146, 81, 0.55);    /* poświata hero (dekoracja, nie kolor tekstu) */
  --glow-2: rgba(250, 215, 193, 0.9);
}

@media (min-width: 768px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }

/* ---- CIEMNY kontekst: sekcja lub element z klasą .is-dark ---- */
.is-dark {
  --bg: var(--color-deep-slate);
  --surface: #332a24;
  --surface-2: #3b312a;
  --ink: #f7f2ec;                       /* krem, 14,4:1 na #27201b */
  --ink-strong: #ffffff;
  --ink-2: #d9d0c6;                     /* 10,5:1 */
  --ink-3: #b9aea2;                     /* 7,4:1 */
  --ink-4: #a69b8f;                     /* 5,9:1 */
  --line: rgba(255, 255, 255, 0.10);
  --line-strong: rgba(255, 255, 255, 0.18);
  --focus: #ffffff;
  color: var(--ink);
  background-color: var(--bg);
}