/* ============================================================
   CRODU — Brand stylesheet v2 (editorial / paper + red)
   Wyciągnięte z przebudowanej strony crodu (project-10751001).
   Fonty lokalnie (TTF, pełne pokrycie latin-ext w jednym pliku/wadze).
   Po renderze sprawdź: pdffonts out.pdf  -> SpaceGrotesk / JetBrainsMono / Inter
   ============================================================ */

/* ---------- Design tokens ---------- */
:root {
  /* Tło / powierzchnie */
  --paper:      #f5f3ef;   /* główne tło jasne (brand-paper) */
  --paper-alt:  #edeae5;   /* tło sekcji / drugi plan (brand-paperAlt) */
  --white:      #ffffff;   /* karty na hover, panele */

  /* Atrament / tekst */
  --ink:        #2a2d30;   /* tekst główny (brand-ink) */
  --ink-light:  #3e4144;   /* tekst nieco lżejszy */
  --ink-muted:  #5c5f62;   /* tekst secondary / opisy */
  --ink-faint:  #6b6e71;   /* meta, captiony, placeholdery */

  /* Akcent */
  --red:        #c41e3a;   /* AKCENT GŁÓWNY (brand-red) */
  --red-light:  #dc2626;   /* wariant jaśniejszy (hover/emfaza) */
  --red-soft:   rgba(196, 30, 58, 0.06);  /* tło tagów na jasnym */

  /* Linie */
  --rule:       rgba(42, 45, 48, 0.15);   /* hairline na jasnym */
  --rule-dark:  rgba(255, 255, 255, 0.18);/* hairline na ciemnym */

  /* Typografia */
  --font-display: "Space Grotesk", system-ui, sans-serif; /* headline, liczby */
  --font-mono:    "JetBrains Mono", ui-monospace, monospace; /* labele, eyebrow, dane */
  --font-body:    "Inter", system-ui, sans-serif;          /* body, paragrafy */
}

/* ---------- @font-face: full-coverage TTF (single file/weight, weasyprint-safe) ---------- */
@font-face{font-display:swap;font-family:"Space Grotesk";font-style:normal;font-weight:400;src:url("./fonts/SpaceGrotesk-400.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Space Grotesk";font-style:normal;font-weight:500;src:url("./fonts/SpaceGrotesk-500.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Space Grotesk";font-style:normal;font-weight:700;src:url("./fonts/SpaceGrotesk-700.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"JetBrains Mono";font-style:normal;font-weight:400;src:url("./fonts/JetBrainsMono-400.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"JetBrains Mono";font-style:normal;font-weight:500;src:url("./fonts/JetBrainsMono-500.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"JetBrains Mono";font-style:normal;font-weight:700;src:url("./fonts/JetBrainsMono-700.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"JetBrains Mono";font-style:italic;font-weight:400;src:url("./fonts/JetBrainsMono-400-Italic.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:400;src:url("./fonts/Inter-400.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:500;src:url("./fonts/Inter-500.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:600;src:url("./fonts/Inter-600.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:normal;font-weight:700;src:url("./fonts/Inter-700.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:italic;font-weight:400;src:url("./fonts/Inter-400-Italic.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:italic;font-weight:500;src:url("./fonts/Inter-500-Italic.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:italic;font-weight:600;src:url("./fonts/Inter-600-Italic.ttf") format("truetype");}
@font-face{font-display:swap;font-family:"Inter";font-style:italic;font-weight:700;src:url("./fonts/Inter-700-Italic.ttf") format("truetype");}

/* ---------- Prymitywy / utility ---------- */
* { box-sizing: border-box; }

.brand-body {                       /* domyślny body text */
  font-family: var(--font-body);
  font-feature-settings: "case" 0;
  color: var(--ink);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

.mono-label {                       /* eyebrow / sekcja, np. "01 / PROBLEM" */
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--red);
}

.mono-meta {                        /* topbar / pagenum / meta po prawej */
  font-family: var(--font-mono);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
}

.display {                          /* headline */
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: var(--ink);
}

.rule { height: 1px; background: var(--rule); border: 0; }

/* znacznik scan-line (akcent na hairline) — opcjonalny ozdobnik z www */
.scan { position: relative; overflow: hidden; }
.scan::after {
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: 22%; background: var(--red);
}

/* ---------- TŁO CANVAS dla umów/NDA/doców klienckich (KANON, 2026-06-30) ----------
   Kropki gęste w rogach/na brzegach, środek czysty pod tekstem ("nieskończony canvas" ze www).
   NIE jednolita kratka/dot-grid (odrzucone). Dobrane pod DRUK: fade do bieli, nie zalewa tonera.
   Wklej PONIŻSZE `background:` do `@page` (i `@page title`) dokumentu — @page nie dziedziczy z klasy.
   Gotowy do kopiowania szablon: _templates/nda-mutual.html
   @page { background:
     radial-gradient(ellipse 96% 92% at 50% 46%, #ffffff 32%, rgba(255,255,255,0) 82%) 0 0/100% 100% no-repeat,
     radial-gradient(circle at center, rgba(42,45,48,.16) 0.9px, transparent 1.4px) 0 0/25px 25px,
     #ffffff; }
-------------------------------------------------------------------------------------- */

/* ---------- Ciemna strona otwierająca (DEFAULT — zasada Piotra 2026-07-14) ---------- */
:root {
  --dark-bg:       #17191b;                 /* tło ciemnej strony tytułowej */
  --paper-on-dark: #f5f3ef;                 /* tekst główny na ciemnym */
  --red-on-dark:   #d63754;                 /* akcent czerwony na ciemnym (brand-red rozjaśniony pod kontrast) */
  --rule-on-dark:  rgba(245,243,239,.16);   /* hairline na ciemnej tytułowej */
  --dot-on-dark:   rgba(245,243,239,.22);   /* kropki canvas na ciemnym */
}
/* Każdy dokument renderujemy 2x: bez suffixu (ciemna tytułowa — default wysyłkowy) i _DRUK (jasna).
   Mechanizm: @page title (ciemna) / @page title-druk (jasna) + html.druk — patrz nda-mutual.html
   i render_dwie_wersje.py. Strony treści (2+) zawsze jasne. */