/* QuestSystem — warstwy kaskady i tokeny.
   Deklaracja kolejności warstw musi być pierwsza: decyduje o pierwszeństwie
   reguł niezależnie od kolejności ładowania plików. */
/* Warstwy porządkują WYŁĄCZNIE nasze własne reguły ogólne. Arkusze 05-08
   walczą z bezwarstwowym CSS wtyczek, więc same też są bezwarstwowe —
   patrz notka na górze każdego z nich. */
@layer reset, base, layout, components;

@layer base {
  :root {
    /* Kolory */
    --qs-bg: #F5F3EE;
    --qs-ink: #16181B;
    --qs-surface: #FFFFFF;
    --qs-accent: #E8590C;        /* tylko display ≥24px i elementy graficzne */
    --qs-accent-text: #BF4A08;   /* tekst i tła pod białym tekstem — AA 5.00:1 */
    --qs-tint: #FEF3E8;
    --qs-muted: #6B7075;
    --qs-body: #3D4147;
    --qs-line: #D9D5CC;
    --qs-success: #2F9E44;
    --qs-success-text: #1E7A33;
    --qs-danger: #C92A2A;
    --qs-on-accent: #FFFFFF;

    /* Kolory produktowe — odbicie mapy z wp-content/mu-plugins/qs-kolory.php.
       Zmiana barwy zaczyna się TAM; tu tylko przepisujemy wartość, bo CSS nie
       sięgnie do PHP-owej tablicy. Zieleń była tu #2F9E44 (czyli po prostu
       --qs-success), a to kolor interfejsu, nie materiału: pojemniki zmierzone
       ze zdjęć mają #2D5238. Oliwka organizerów to osobna barwa, nie odcień
       zieleni — patrz komentarz w qs-kolory.php. */
    --qs-p-orange: #E8590C;
    --qs-p-red: #C92A2A;
    --qs-p-blue: #1971C2;
    --qs-p-green: #2D5238;
    --qs-p-olive: #9EAB6B;
    --qs-p-grey: #868E96;
    --qs-p-black: #212529;

    /* Typografia */
    --qs-display: 'Anton', 'Arial Narrow', sans-serif;
    --qs-sans: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --qs-mono: 'Fragment Mono', ui-monospace, Menlo, monospace;

    /* Rytm i forma */
    --qs-gutter: 16px;
    --qs-max: 1240px;
    --qs-border: 3px;
    --qs-shadow: 5px 5px 0 var(--qs-ink);
    --qs-shadow-sm: 3px 3px 0 var(--qs-ink);
    --qs-shadow-md: 4px 4px 0 var(--qs-ink);
    --qs-radius: 0;

    /* Proporcje mediów */
    --qs-ratio: 1;
    --qs-fit: contain;
  }

  @media (min-width: 768px)  { :root { --qs-gutter: 24px; } }
  @media (min-width: 1200px) { :root { --qs-gutter: 36px; } }
}