/* Nakładki · tokeny design systemu.
   Jedno miejsce na kolory, kroje, promienie i cienie całego prototypu.
   Zmiana wartości tutaj zmienia wszystkie ekrany, komponenty i rendery postów. */
:root {
  /* Interfejs: tła i powierzchnie */
  --nk-bg: #F7F6F2;
  --nk-surface: #FFFFFF;
  --nk-surface-2: #EFEDE7;
  --nk-surface-3: #ECE9E2;
  --nk-photo-placeholder: #D9D4CB;

  /* Interfejs: linie */
  --nk-line: #E3E0D9;
  --nk-line-soft: #EFEDE7;
  --nk-line-strong: #D6D2C9;
  --nk-line-dashed: #B9B3A6;
  /* The edge of a text field (WCAG 1.4.11): 4.0:1 on white, 3.7:1 on the page background. */
  --nk-line-input: #7A7F8C;

  /* Interfejs: tekst */
  --nk-ink: #0B1220;
  --nk-ink-2: #3A4050;
  --nk-muted: #5D6372;
  --nk-subtle: #8A8F9C;
  --nk-numeral: #D9D5CC;
  --nk-on-ink: #FFFFFF;
  --nk-link-hover: #1C5F99;

  /* Ciemne bloki i nagłówek admina */
  --nk-dark-2: #1B2333;
  --nk-dark-3: #2A3242;
  --nk-dark-line: #3A4252;
  --nk-dark-muted: #B4BAC6;
  --nk-dark-text-2: #C9CED8;
  --nk-dark-ink: #E8EBF2;
  --nk-dark-placeholder: #8F97A8;
  /* The edge of a text field on a dark block (WCAG 1.4.11): 3.9:1 on --nk-ink, 3.3:1 on --nk-dark-2. */
  --nk-dark-line-input: #6B7385;

  /* Stany */
  --nk-success: #1E5E30;
  --nk-success-bg: #E6F2EA;
  --nk-success-dot: #1E7B3C;
  --nk-success-line: #C9D8CC;
  --nk-success-soft: #F2F6F3;
  --nk-warn: #5C3B00;
  --nk-warn-bg: #FBF0D9;
  --nk-warn-dot: #C27C0E;
  --nk-danger: #A3262A;
  --nk-danger-ink: #6B1A1D;
  --nk-danger-bg: #F9E3E3;
  --nk-danger-soft: #FDF3F3;
  --nk-danger-line: #E8B4B6;
  --nk-danger-line-soft: #F3D7D8;
  --nk-chart-muted: #9AA3B5;

  /* Typografia (the faces are declared in app.css) */
  /* Sofia Sans: the interface, body text, buttons, labels, forms, tables and figures. */
  --nk-font: 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Hanken Grotesk: the headings of the site (h1 to h6 and the title classes); Sofia Sans until it loads. */
  --nk-font-display: 'Hanken Grotesk', 'Sofia Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Promienie */
  --nk-r-tag: 10px;
  --nk-r-seg: 11px;
  --nk-r-control: 12px;
  --nk-r-field: 14px;
  --nk-r-box: 16px;
  --nk-r-card: 18px;
  --nk-r-panel: 20px;
  --nk-r-panel-lg: 22px;
  --nk-r-tile: 24px;
  --nk-r-hero: 28px;
  --nk-r-pill: 999px;

  /* Cienie */
  --nk-shadow-card: 0 1px 2px rgba(11, 18, 32, 0.08), 0 14px 30px rgba(11, 18, 32, 0.14);
  --nk-shadow-float: 0 0 0 4px #FFFFFF, 0 18px 40px rgba(11, 18, 32, 0.16);

  /* Rendery nakładek i szablonów postów (canvas czyta je przy rysowaniu) */
  --nk-post-paper: #FBFAF7;
  --nk-post-paper-dark: #111726;
  --nk-post-ink: #0B1220;
  --nk-post-soft: #4A5162;
  --nk-post-url: #3A4050;
  /* The generated gradient background of the Figma posts ("Arka PRO"): the paper, the dark paper, the gold both colour
     spots fade into on light paper, and the black of its texts. */
  --nk-post-glow-paper: #FFFFFF;
  --nk-post-glow-paper-dark: #05031D;
  --nk-post-glow-fade: #D8B219;
  --nk-post-glow-ink: #000000;
  /* The text on the pictures (renderer.js draws it at 400 and 800): the post text, the address, the button, the info
     line, the page name at the top of a post and the nakladki.com.pl mark; Hanken Grotesk as in the Figma posts. */
  --nk-post-font: 'Hanken Grotesk', 'Sofia Sans', system-ui, sans-serif;
  /* The display text on the overlays (renderer.js draws it at 800): the plates, the page name on the ring band and the
     badge. 'Sofia Sans', system-ui, sans-serif here sets them in the text face instead. */
  --nk-post-display: 'Sofia Sans Extra Condensed', 'Sofia Sans', system-ui, sans-serif;
  --nk-mark-bg: #0B1220;
  --nk-mark-ink: #FFFFFF;

  /* Motion (app.css "Motion", motion.js): hover, focus and pressed states; a picture on canvas, a message, a ready
     file, an opened section; the loading curtain. The rise is how far a message or a ready file comes up from. */
  --nk-motion-fast: 150ms;
  --nk-motion: 260ms;
  --nk-motion-slow: 300ms;
  --nk-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --nk-rise: 6px;
}
/* With prefers-reduced-motion: reduce nothing moves (WCAG 2.3.3): states change at once, pictures, messages and the
   curtain only fade, and briefly. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nk-motion-fast: 0ms;
    --nk-motion: 100ms;
    --nk-motion-slow: 120ms;
    --nk-rise: 0px;
  }
}