/* Hallmark · tokens · theme: custom · vibe: "engineering precision, dark workshop, amber signal"
 * paper: oklch(15% 0.008 75) · accent: oklch(77% 0.155 74)
 * display: Space Grotesk · body: Inter · mono: JetBrains Mono
 * axes: dark / grotesk-sans / chromatic-amber ~75°
 *
 * JEDYNE źródło tokenów dla obu powierzchni:
 *   - public/index.html   (landing — plik statyczny, zaciąga przez <link>)
 *   - src/layouts/BaseLayout.astro (blog — zaciąga przez <link>)
 * Wcześniej ten zestaw był zduplikowany w obu plikach i rozjeżdżał się przy każdej zmianie.
 */

:root {
  /* ── Kolor ──────────────────────────────────────────────────────────────
     Paleta OKLCH zakotwiczona na firmowym amberze #f5a623 ≈ oklch(77% 0.155 74).
     Każdy neutralny ma chromę > 0 (podbarwiony w stronę akcentu) — czysta szarość
     na ciemnym tle wygląda martwo i łamie bramki 7 i 22 slop-testu. */

  /* Papier — ciemny warsztat, podbarwiony ciepłem */
  --color-paper:      oklch(15% 0.008 75);   /* tło strony            (było #0d0d0d) */
  --color-paper-2:    oklch(18% 0.010 75);   /* karty, panele         (było #141414) */
  --color-paper-3:    oklch(22% 0.010 75);   /* podniesione warstwy   (było #1a1a1a) */
  --color-paper-deep: oklch(12% 0.007 75);   /* stopka, pasma         (było #0a0a0a) */

  /* Atrament */
  --color-ink:        oklch(93% 0.010 78);   /* tekst główny          (było #f0ede8) */
  --color-ink-2:      oklch(72% 0.010 78);   /* tekst drugorzędny */
  /* Poniższe dwa są jaśniejsze niż odpowiedniki na starej stronie (#7a7570, #4a4540).
     Tamte dawały 4.2:1 i 2.4:1 — poniżej wymaganych 4.5:1 dla małego tekstu.
     L66 i L60 przechodzą na każdym tle papieru, w tym paper-3. */
  --color-muted:      oklch(66% 0.011 78);   /* metadane, etykiety mono, podpisy */
  --color-neutral:    oklch(62% 0.010 78);   /* placeholdery, glify wygaszone */

  /* Linie */
  --color-rule:       oklch(28% 0.010 75);   /* dzielniki             (było #252220) */
  --color-rule-2:     oklch(24% 0.009 75);   /* dzielniki wtórne      (było #1e1c1a) */

  /* Akcent — sygnał, nie wypełnienie. Footprint ≤ 5% powierzchni (bramka 23). */
  --color-accent:     oklch(77% 0.155 74);   /* amber firmowy         (było #f5a623) */
  --color-accent-dim: oklch(62% 0.135 70);   /* stan wciśnięty        (było #c47d0e) */
  --color-accent-ink: oklch(15% 0.008 75);   /* tekst NA akcencie — ciemny, bo akcent jest jasny */
  --color-accent-soft: oklch(77% 0.155 74 / 0.12);  /* tło aktywnego elementu */
  --color-accent-line: oklch(77% 0.155 74 / 0.35);  /* obramowanie aktywnego elementu */

  /* Stany */
  /* Focus: ten sam odcień co akcent, wyższa chroma. Zawsze rysowany z
     outline-offset ≥ 3px, więc pierścień ląduje na tle strony, nigdy na
     wypełnieniu amber — inaczej byłby niewidoczny (amber na amberze to 1.09:1). */
  --color-focus:      oklch(80% 0.190 74);   /* tylko :focus-visible, pokazuje się natychmiast */
  --color-error:      oklch(64% 0.180 25);
  --color-success:    oklch(72% 0.150 150);

  /* Cienie — na ciemnym tle ciasne i ciemne, nigdy poświata.
     Jako tokeny, bo surowe oklch() w deklaracji łamie bramkę 48. */
  --color-shadow:        oklch(8% 0.006 75 / 0.45);
  --color-shadow-ambient: oklch(8% 0.006 75 / 0.28);

  /* ── Typografia ─────────────────────────────────────────────────────────
     Inter zostaje jako body (legalny), ale NIE jako display — bramka 1 zakazuje
     Intera w nagłówkach. Display przechodzi na Space Grotesk. */
  --font-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* Skala 1.25 (major third) */
  --text-xs:   0.64rem;
  --text-sm:   0.8rem;
  --text-base: 1rem;
  --text-md:   1.25rem;
  --text-lg:   1.5625rem;
  --text-xl:   1.9531rem;
  --text-2xl:  2.4414rem;
  --text-3xl:  3.0518rem;
  --text-4xl:  3.8147rem;
  --text-display:   clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-display-s: clamp(2rem, 3.5vw + 0.75rem, 3.25rem);
  /* Hero ma pięć bloków treści nad zakładką (logo, nagłówek, typewriter,
     lead, maksyma, CTA). Pełny --text-display wypchnąłby CTA poza ekran przy
     1280×800 — bramka 44 wymaga, by CTA było widoczne bez przewijania.
     Podniesione z 3.75rem po usunięciu chipów statusu i kolumny specyfikacji. */
  --text-display-hero: clamp(2.5rem, 4.2vw + 0.75rem, 4.25rem);

  /* ── Przestrzeń — skala 4pt ─────────────────────────────────────────── */
  --space-3xs: 0.125rem;  /*  2px */
  --space-2xs: 0.25rem;   /*  4px */
  --space-xs:  0.5rem;    /*  8px */
  --space-sm:  0.75rem;   /* 12px */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 5rem;      /* 80px */
  --space-4xl: 7.5rem;    /* 120px */

  /* Wcięcie kontenera — treść nigdy nie dotyka krawędzi ekranu */
  --gutter: clamp(1rem, 4vw, 1.5rem);
  --measure: 68ch;        /* miara wiersza prozy */

  /* ── Linie i promienie ──────────────────────────────────────────────── */
  --rule-hairline: 1px;
  --rule-thick:    2px;
  --radius-sm:  4px;
  --radius-md:  6px;      /* rejestr techniczny: ciasne promienie, nie pigułki */
  --radius-lg:  10px;

  /* ── Ruch ───────────────────────────────────────────────────────────── */
  --dur-micro: 120ms;
  --dur-short: 220ms;
  --dur-long:  420ms;
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:     cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}