/*
 * Jedyne miejsce z konkretnymi wartościami wyglądu. Pozostałe style używają var(--…).
 * Kontrast i rozmiary sprawdza tests/contract/accessibility.test.js:
 * tekst co najmniej 7:1, ramki i fokus co najmniej 3:1, tekst co najmniej 20 px, cele dotyku od 48 px.
 */

:root {
  /* 1rem = 20 px przy domyślnych 16 px przeglądarki; --text-scale ustawia aplikacja (wielkość tekstu). */
  --root-font-size: 125%;
  --text-scale: 1;

  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-size-base: 1rem;
  --font-size-large: 1.25rem;
  --font-size-title: 1.75rem;
  --font-weight-bold: 700;
  --line-height: 1.5;
  --line-height-tight: 1.2;
  --line-length: 60ch;

  --space-xs: 0.25rem;
  --space-s: 0.5rem;
  --space-m: 1rem;
  --space-l: 1.5rem;
  --space-xl: 2.5rem;
  --page-width: 40rem;

  --radius: 0.75rem;
  --border-width: 0.15rem;
  --focus-width: 0.2rem;
  --focus-offset: 0.2rem;

  /* 50 px i 60 px przy domyślnej wielkości tekstu. */
  --tap-target-min: 2.5rem;
  --tap-target-game: 3rem;
  --icon-size-large: 3rem;
  --choice-min-width: 10rem;
  --radio-size: 1.5rem;

  /* Plansza gier słownych: 56 px na kafelek i 8 px odstępu, czyli 5 kafelków w rzędzie na telefonie 360 px. */
  --tile-size: 2.8rem;
  --tile-gap: 0.4rem;
  --tile-font-size: 1.75rem;
  /* Przyciski pod planszą gry: minimalna szerokość, przy której dwa mieszczą się obok siebie na telefonie. */
  --bar-button-min: 7rem;

  --duration: 200ms;

  /* Motyw jasny: tło lekko złamana biel (mniej olśnienia), tekst prawie czarny. */
  color-scheme: light;
  --color-bg: #faf7f0;
  --color-surface: #ffffff;
  --color-text: #1a1a1a;
  --color-text-muted: #3b3b3b;
  --color-primary: #1d4f91;
  --color-on-primary: #ffffff;
  --color-border: #6b6b6b;
  --color-focus: #b34a00;
  --color-success: #1b6e35;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #141414;
  --color-surface: #222222;
  --color-text: #f2f2f2;
  --color-text-muted: #d0d0d0;
  --color-primary: #a8c8ff;
  --color-on-primary: #0d1b33;
  --color-border: #9a9a9a;
  --color-focus: #ffb46b;
  --color-success: #7bd88f;
}

/*
 * Motyw „jak w urządzeniu” przy ciemnym systemie. CSS nie pozwala połączyć tego zapytania
 * z atrybutem data-theme w jednej regule, więc kolory są powtórzone. Test pilnuje, żeby były identyczne.
 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --color-bg: #141414;
    --color-surface: #222222;
    --color-text: #f2f2f2;
    --color-text-muted: #d0d0d0;
    --color-primary: #a8c8ff;
    --color-on-primary: #0d1b33;
    --color-border: #9a9a9a;
    --color-focus: #ffb46b;
    --color-success: #7bd88f;
  }
}

:root[data-theme="contrast"] {
  color-scheme: dark;
  --color-bg: #000000;
  --color-surface: #000000;
  --color-text: #ffffff;
  --color-text-muted: #ffffff;
  --color-primary: #ffff00;
  --color-on-primary: #000000;
  --color-border: #ffffff;
  --color-focus: #00ffff;
  --color-success: #00ff66;
}