/*
 * Warstwa tokenów — zmienne CSS motywu.
 *
 * Ładowana jako pierwsza; wszystkie pozostałe arkusze zależą od niej.
 * Nazwy opisują sposób użycia, nie barwę — dzięki temu tryb wysokiego kontrastu
 * podmienia same wartości i żaden komponent nie potrzebuje wyjątku.
 */

/*
 * Drugi selektor jest dla edytora bloków: przy metaboksach edytor rezygnuje z iframe'a
 * i przepisuje selektory arkusza, przez co same tokeny z :root nie trafiłyby do treści.
 */
:root,
.editor-styles-wrapper {
  /* ——— Kolory ——— */
  --color-page: #f9f9f9;
  --color-surface: #eeeeee;
  --color-surface-inverse: #1e1e1e;
  --color-text: #1e1e1e;
  --color-text-muted: #6a6a6a;
  --color-text-inverse: #ffff00;
  --color-focus: #004788;
  /* zieleń marki — znaczniki nagłówków, obramowania elementów interaktywnych */
  --color-accent: #349e17;
  /* ciemniejszy wariant zieleni — pod tekstem, gdzie jasna nie daje kontrastu 4,5:1 */
  --color-accent-strong: #2a8112;
  --color-text-on-accent: #f9f9f9;
  /* sekcje malowane na ciemno na pełną szerokość okna */
  --color-surface-dark: #1c3d5a;
  --color-text-on-dark: #f9f9f9;
  /* równa się --color-focus, ale to osobna rola — zmieniamy je niezależnie */
  --color-link: #004788;
  --color-border: #eeeeee;
  --color-error: #b3261e;

  /* ——— Typografia ——— */
  /* jeden mnożnik steruje całą typografią strony */
  --font-scale: 1;

  --font-family:
    system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-size-xl: calc(1.75rem * var(--font-scale));
  --font-size-lg: calc(1.25rem * var(--font-scale));
  --font-size-base: calc(1rem * var(--font-scale));
  --font-size-sm: calc(0.875rem * var(--font-scale));
  --font-size-xs: calc(0.75rem * var(--font-scale));
  --line-height: 1.4;

  --font-size-h1: calc(2rem * var(--font-scale));
  --font-size-h2: calc(1.5rem * var(--font-scale));
  --font-size-h3: calc(1.25rem * var(--font-scale));
  --font-size-h4: calc(1rem * var(--font-scale));

  --letter-spacing-text: 0.01em;
  --letter-spacing-small: 0.02em;

  /* ——— Odstępy i wykończenie ——— */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 3rem;

  /*
   * Podświetlenie elementów interaktywnych. Półprzezroczysta czerń przyciemnia to,
   * na czym leży, więc ta sama reguła działa na jasnym i na ciemnym tle.
   */
  --color-hover: rgb(0 0 0 / 8%);

  --container-width: 1100px;
  --container-padding: 16px;

  --content-width: 782px;
  --content-flow: var(--space-md);

  --radius: 4px;
  --focus-width: 3px;
}

/* ——— Skala czcionki ——— */

[data-font-scale="large"] {
  --font-scale: 1.25;
}

[data-font-scale="xlarge"] {
  --font-scale: 1.5;
}

/* ——— Tryb wysokiego kontrastu ——— */
[data-contrast="high"] {
  --color-page: #000000;
  --color-surface: #000000;
  --color-text: #ffff00;
  --color-text-muted: #ffff00;
  --color-focus: #ffff00;

  /*
   * Zieleń marki na czarnym tle daje kontrast 2,1:1 — poniżej progu 3:1 wymaganego
   * nawet dla samej grafiki. W tym trybie ustępuje miejsca żółci.
   */
  --color-accent: #ffff00;
  --color-link: #ffff00;
  --color-border: #ffff00;
  --color-error: #ffff00;

  /*
   * Ciemne sekcje zlewają się z czarną stroną, więc niosą je obramowania, nie tło.
   * Tekst na akcencie schodzi na czarny, bo sam akcent jest tu żółty.
   */
  --color-accent-strong: #ffff00;
  --color-text-on-accent: #000000;
  --color-surface-dark: #000000;
  --color-text-on-dark: #ffff00;

  /* Przyciemnianie czerni nic nie daje — podświetlenie niesie tu żółta poświata. */
  --color-hover: rgb(255 255 0 / 25%);
}