/* Wyciąg z src/styles/_tokens.scss — wyłącznie paleta i kroje.
   Kopia ręczna, nie import (uzasadnienie: docs/instagram/9-4-produkcja-karuzeli-kodem.md §4).
   Przy zmianie palety na stronie — zaktualizować też tutaj. */

:root {
  /* Powierzchnie */
  --surface-raised: #f9f8f6;
  --surface-page: #f2efea;
  --surface-sunken: #ebe7df;
  --surface-sunken-2: #e4ded3;
  --surface-dark: #042d2b;
  --surface-dark-warm: #241f21;

  /* Tekst na jasnym */
  --ink-primary: #241f21;
  --ink-secondary: #524945;
  --ink-muted: #665e5a;

  /* Tekst na ciemnym */
  --ink-on-dark: #f2efea;
  --ink-on-dark-muted: #beb9b0;

  /* CTA — żółty, tekst na nim zawsze ciemny */
  --accent-cta: #e9e778;
  --accent-cta-hover: #dcda5e;
  --accent-cta-ink: #241f21;

  /* Tinty — wyłącznie wypełnienia, nigdy tekst/linia */
  --tint-celadon: #bacfa3;
  --tint-kraft: #c6af88;

  /* Kolor markowy */
  --accent: #042d2b;
  --accent-hover: #0f5f58;

  /* Linie i semantyka */
  --line: #e4ded3;
  --line-strong: #d2cdc4;
  --line-on-dark: #524945;
  --line-on-dark-strong: #988f8b;
  --error: #c73623;

  /* Kroje i wagi */
  --font-display: "Clash Display", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Satoshi", "Segoe UI", system-ui, -apple-system, sans-serif;

  --fw-display: 600;
  --fw-heading: 500;
  --fw-body: 400;
  --fw-medium: 500;
}

/* --- Poza wyciągiem: token bez odpowiednika w _tokens.scss --- */
/* Strona nie ma wagi 700 (najwyższa to --fw-display: 600). Karuzela jej
   potrzebuje: hook czyta się z kafelka Instagrama, nie z ekranu monitora.
   Dopisane tutaj, żeby nie siedziało literałem w styl-hook.css. */
:root {
  --fw-hook: 700;
}