/* KOPIA — plik źródłowy to design/tokens.css.
   Zmiany wprowadzaj tam i uruchom `node design/sync-tokens.mjs`. */

/* ============================================================================
   Folwark Labs — tokeny wizualne
   PLIK ŹRÓDŁOWY. Kopie w landing/css/ i hq/frontend/src/styles/ powstają
   przez `node design/sync-tokens.mjs`. Nie edytuj kopii.

   Kierunek: folwark, który działa na światłowodzie.

   Trzy wpływy i podział pracy między nimi:
   • Apple — dyscyplina. Ogromna typografia, jedna myśl na ekran, dużo pustki,
     jeden akcent. To jest szkielet i to on decyduje o proporcjach.
   • Cyberpunk 2077 — jakość światła. Nie skanlinie i nie glitch, tylko
     bursztynowa poświata terminala na zimnym, prawie czarnym tle.
   • 1670 — język i struktura. Folwark to majątek: dwór i oficyny, każda coś
     produkuje, jeden gospodarz obchodzi je i liczy plon. To dosłownie opis
     Portfolio HQ. Folwark siedzi więc w nazewnictwie i w metaforze, nie
     w drewnianych teksturach.

   Bursztyn (#FFC53D) jest mostem między wszystkimi trzema: żółć Night City
   i kolor słomy to ten sam zakres widma.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* ── Powierzchnie ──────────────────────────────────────────────────────
     Czerń ekranowa z chłodnym podtonem, nie czerń drukarska. Cztery poziomy
     wystarczą; piąty zawsze kończy się tym, że nikt nie wie, którego użyć. */
  --void: #08090b;            /* tło strony */
  --soil: #0f1114;            /* karta, panel */
  --loam: #14161a;            /* powierzchnia wykresu, pole formularza */
  --furrow: #1b1e24;          /* podniesiony element, stan hover */
  --hairline: rgba(237, 234, 227, 0.09);
  --hairline-strong: rgba(237, 234, 227, 0.17);

  /* ── Tekst ─────────────────────────────────────────────────────────────
     Len zamiast bieli. Czysta biel na czerni wibruje i męczy przy liczbach. */
  --linen: #edeae3;           /* tekst główny — 15.6:1 na --void */
  --flax: #a7a69d;            /* tekst drugorzędny — 7.4:1 */
  --ash: #77776f;             /* metadane, tylko duże lub pogrubione — 3.8:1 */

  /* ── Akcent ────────────────────────────────────────────────────────────
     Bursztyn jest jedynym kolorem interaktywnym. Zimny sygnał pojawia się
     wyłącznie tam, gdzie mówimy o danych na żywo — inaczej dwa akcenty
     zaczynają ze sobą konkurować i strona przestaje mieć środek ciężkości. */
  --straw: #ffc53d;
  --straw-deep: #c08a1e;
  --straw-soft: rgba(255, 197, 61, 0.14);
  --straw-line: rgba(255, 197, 61, 0.34);
  --signal: #5ee6d0;
  --signal-soft: rgba(94, 230, 208, 0.12);

  /* ── Status ────────────────────────────────────────────────────────────
     Zawsze z ikoną i słowem, nigdy sam kolor: para „dobrze/krytycznie"
     jest nierozróżnialna przy deuteranopii i żaden dobór odcieni tego nie
     naprawi (sprawdzone walidatorem, ΔE 4.3). */
  --good: #2fa97a;
  --warn: #c08a1e;
  --crit: #e2465f;
  --info: #3f8fe0;
  --good-soft: rgba(47, 169, 122, 0.14);
  --warn-soft: rgba(192, 138, 30, 0.14);
  --crit-soft: rgba(226, 70, 95, 0.14);

  /* ── Serie wykresów ────────────────────────────────────────────────────
     Kolejność jest mechanizmem bezpieczeństwa, nie kosmetyką — przechodzi
     wszystkie bramki walidatora na powierzchni --loam (najgorsza para
     sąsiednia: ΔE 11.7 przy protanopii, 18.7 przy pełnym widzeniu barw).
     Nie zmieniaj kolejności bez ponownej walidacji. */
  --series-1: #c08a1e;   /* ochra */
  --series-2: #1f9e88;   /* morska zieleń */
  --series-3: #8a7be8;   /* fiolet */
  --series-4: #e85a7a;   /* róż */
  --series-5: #3f8fe0;   /* błękit */
  --series-6: #4fa83f;   /* zieleń */

  /* Most MRR: przyrosty jedną rampą, ubytki drugą. To nie jest sześć
     kategorii, tylko biegunowość — i tak trzeba ją kodować. */
  --gain-1: #7fb6ee;
  --gain-2: #3f8fe0;
  --gain-3: #2a6ab0;
  --loss-1: #f08aa0;
  --loss-2: #e85a7a;

  /* ── Typografia ────────────────────────────────────────────────────────
     Archivo ma osie szerokości i grubości — nagłówek może być szeroki
     i ciężki, a podpis wąski i lekki, bez drugiego kroju.
     IBM Plex Mono obsługuje liczby: czyta się jednocześnie jak terminal
     i jak księga rachunkowa. Dwa kroje, koniec. */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --text-hero: clamp(2.6rem, 8.2vw, 6.25rem);
  --text-display: clamp(2.1rem, 5.6vw, 4.4rem);
  --text-title: clamp(1.5rem, 2.8vw, 2.2rem);
  --text-lead: clamp(1.05rem, 1.6vw, 1.35rem);
  --text-body: 1rem;
  --text-small: 0.875rem;
  --text-micro: 0.75rem;

  --track-hero: -0.045em;
  --track-display: -0.03em;
  --track-eyebrow: 0.22em;

  /* ── Rytm ──────────────────────────────────────────────────────────────
     Skala oparta na 4 px. Sekcje oddychają szeroko — to jest połowa efektu
     „clean"; druga połowa to konsekwentne trzymanie się tej skali. */
  --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-10: 9rem;
  --section: clamp(5rem, 13vh, 11rem);

  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  --shell: 76rem;
  --shell-narrow: 46rem;

  --shadow-soft: 0 1px 2px rgb(0 0 0 / 0.5), 0 12px 40px -18px rgb(0 0 0 / 0.9);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.5), 0 28px 70px -30px rgb(0 0 0 / 1);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 260ms;
  --dur-slow: 620ms;
}

/* Tryb wysokiego kontrastu i wymuszone kolory systemu — hairline
   z półprzezroczystości znika, więc podajemy jawną krawędź. */
@media (forced-colors: active) {
  :root {
    --hairline: CanvasText;
    --hairline-strong: CanvasText;
  }
}