/* =========================================================================
   tokens.css — wspólny system designu „Studio" (redesign 2026-07)
   Ładowany PRZED modern.css / style.css / inline BlogLayout.
   Źródło wartości: docs/redesign-studio-spec.md §2.
   ========================================================================= */

/* ---- Fonty self-hosted (bez Google Fonts CDN, prywatność) ---- */
/* Variable woff2, subset latin + latin-ext (PL + EN). */

@font-face {
  font-family: 'Fraunces';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/fraunces-var-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;
}
@font-face {
  font-family: 'Fraunces';
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/fraunces-var-latin-ext.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;
}

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jakarta-var-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;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  src: url('/fonts/jakarta-var-latin-ext.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;
}

:root {
  /* — Kolory: grunt — (chłodny grafit, nie czekolada) */
  --ink:        #191a1c;  /* neutralna grafitowa czerń — ciemne sekcje, tekst */
  --ink-2:      #232427;  /* ciemniejszy pas / stripe */
  --char:       #141517;  /* tło panelu pod ciemnym zdjęciem */
  --graphite:   #1f2124;  /* grafit panelu hero — chłodny, wtapia zdjęcie */
  --paper:      #f4f4f3;  /* chłodna biel — główne tło treści (neutralna, nie cream) */
  --bone:       #fcfcfb;  /* karty / powierzchnie na paper */

  /* — Akcent (marka) — */
  --ember:      #fd7726;  /* jedyny akcent */
  --ember-deep: #d94f0a;  /* hover, gradient depth, linki na jasnym */

  /* — Neutralne (chłodny grafitowy bias) — */
  --stone-700:  #45474a;  /* tekst drugorzędny na jasnym */
  --stone-500:  #696c70;  /* podpisy, meta */
  --stone-300:  #d5d6d8;  /* hairline na jasnym */
  --line:       rgba(22,24,27,.10);

  /* — Typografia — */
  --serif: 'Fraunces', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --sans:  'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* — Skala typograficzna (clamp min→max) — */
  --fs-display: clamp(2.7rem, 6vw, 5rem);
  --fs-h1:      clamp(2.2rem, 4vw, 3.4rem);
  --fs-h2:      clamp(1.8rem, 3.2vw, 2.7rem);
  --fs-h3:      1.25rem;
  --fs-body:    1.0625rem;   /* 17px */
  --fs-small:   0.82rem;
  --fs-eyebrow: 0.72rem;

  /* — Rytm / promienie / cień — */
  --gap:        clamp(1.25rem, 4vw, 2.75rem);
  --section-y:  clamp(4rem, 9vw, 7rem);
  --radius:     3px;
  --shadow:     0 26px 54px -28px rgba(23,19,15,.5);
  --maxw:       1120px;

  /* — Alias wsteczny: stare użycia --brand-orange nie pękną — */
  --brand-orange: var(--ember);
}

/* =========================================================================
   Prymitywy „Studio" — współdzielone przez landing i blog.
   ========================================================================= */

.eyebrow {
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: .2em;
  font-weight: 700;
  color: var(--ember-deep);
  display: inline-block;
  margin-bottom: 1rem;
}
/* na ciemnym tle akcent jaśniejszy */
.on-dark .eyebrow, .stripe-dark .eyebrow { color: var(--ember); }

/* Rytm sekcji */
.section-y { padding-block: var(--section-y); }

/* Ciemny pas (hero, kontakt) */
.stripe-dark {
  background: var(--ink);
  color: var(--paper);
}
.stripe-dark h1, .stripe-dark h2, .stripe-dark h3 { color: var(--paper); }

/* Przyciski */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1rem;
  padding: .85rem 1.5rem;
  border-radius: var(--radius);
  border: 1px solid currentColor;
  background: transparent;
  color: inherit;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn-ghost:hover { transform: translateY(-2px); }
.stripe-dark .btn-ghost:hover, .on-dark .btn-ghost:hover { background: rgba(255,255,255,.08); }

/* Maska wtapiająca zdjęcie w --char (hero) */
.hero-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--graphite);
}
.hero-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Statystyki */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin-top: 2rem;
}
.stat { min-width: 6rem; }
.stat .stat-num {
  font-family: var(--serif);
  font-size: 2.4rem;
  line-height: 1;
  color: var(--ember-deep);
  display: block;
}
.stripe-dark .stat .stat-num, .on-dark .stat .stat-num { color: var(--ember); }
.stat .stat-label {
  font-size: var(--fs-small);
  color: var(--stone-500);
  letter-spacing: .02em;
}
.stripe-dark .stat .stat-label, .on-dark .stat .stat-label { color: rgba(247,244,239,.65); }

@media (prefers-reduced-motion: reduce) {
  .btn-ghost { transition: none; }
  .btn-ghost:hover { transform: none; }
}