/* ============================================================================
   Kodacy — system stylów: tokeny marki + komponenty wielokrotnego użytku
   Jedno źródło prawdy dla WWW (kodacy.pl), platformy lekcji i materiałów.
   Wizualna specyfikacja: brand/style-tile.html · zasady: MARKA.md

   Użycie A — Tailwind v4 (strona kodacy.pl):
       app.css:  @import "tailwindcss";
                 @import "./kodacy.css";
       → utilities: bg-yellow, text-ink, font-display, rounded-card,
         shadow-retro, bg-sweetie-10 … + klasy komponentów .k-*
       (Tailwind v4 konfiguruje się w CSS przez @theme — bez tailwind.config.js.)

   Użycie B — bez builda (prototyp, strony statyczne):
       <link rel="stylesheet" href="kodacy.css">
       → zmienne --k-* i klasy .k-* działają od razu; blok @theme
         przeglądarka po prostu ignoruje.

   Fonty NIE są tu osadzone: WWW ładuje Baloo 2 / Nunito / Press Start 2P
   (Google Fonts lub self-host); style-tile.html ma je wbudowane na offline.
   ========================================================================== */

/* ---------- 1. Tokeny źródłowe (działają wszędzie) ---------- */

:root {
  /* paleta SWEETIE-16 — pełna skala (numeracja jak w kodzie gier dzieci) */
  --k-sweetie-0:  #1a1c2c;
  --k-sweetie-1:  #5d275d;
  --k-sweetie-2:  #b13e53;
  --k-sweetie-3:  #ef7d57;
  --k-sweetie-4:  #ffcd75;
  --k-sweetie-5:  #a7f070;
  --k-sweetie-6:  #38b764;
  --k-sweetie-7:  #257179;
  --k-sweetie-8:  #29366f;
  --k-sweetie-9:  #3b5dc9;
  --k-sweetie-10: #41a6f6;
  --k-sweetie-11: #73eff7;
  --k-sweetie-12: #f4f4f4;
  --k-sweetie-13: #94b0c2;
  --k-sweetie-14: #566c86;
  --k-sweetie-15: #333c57;

  /* role semantyczne (MARKA.md §5) — w layoutach używać RÓL, nie numerów */
  --k-ink:    var(--k-sweetie-0);   /* tekst, ciemne tła („ekran konsoli w nocy") */
  --k-paper:  var(--k-sweetie-12);  /* jasne tło strony */
  --k-card:   #ffffff;              /* karty na jasnym tle */
  --k-yellow: var(--k-sweetie-4);   /* kolor wiodący: akcent, CTA, błysk */
  --k-blue:   var(--k-sweetie-9);   /* interakcje na jasnym: linki, przyciski 2. */
  --k-sky:    var(--k-sweetie-10);  /* akcent ilustracyjny / na ciemnym */
  --k-green:  var(--k-sweetie-6);   /* sukces, „zrobione" */
  --k-red:    var(--k-sweetie-2);   /* ostrzeżenie, „robak" — oszczędnie */
  --k-orange: var(--k-sweetie-3);   /* akcent pomocniczy (ilustracje, cienie) */
  --k-muted:  var(--k-sweetie-14);  /* tekst pomocniczy */
  --k-line:   rgba(86, 108, 134, .22);

  /* typografia (nagłówki / tekst / piksel-ozdobnik / kod) */
  --k-font-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --k-font-body:    'Nunito', 'Segoe UI', system-ui, sans-serif;
  --k-font-pixel:   'Press Start 2P', monospace;   /* TYLKO ozdobnie, nigdy akapity */
  --k-font-mono:    Consolas, 'Cascadia Mono', ui-monospace, monospace;

  /* kształt i cień („naklejkowy" twardy cień, bez rozmycia) */
  --k-radius: 14px;
  --k-shadow: 0 3px 0 rgba(26, 28, 44, .14);
}

/* ---------- 2. Mapowanie dla Tailwind v4 (@theme → utilities) ----------
   Przeglądarki bez Tailwinda ignorują ten blok w całości. */

@theme inline {
  --color-ink:    var(--k-ink);
  --color-paper:  var(--k-paper);
  --color-card:   var(--k-card);
  --color-yellow: var(--k-yellow);
  --color-blue:   var(--k-blue);
  --color-sky:    var(--k-sky);
  --color-green:  var(--k-green);
  --color-red:    var(--k-red);
  --color-orange: var(--k-orange);
  --color-muted:  var(--k-muted);
  --color-line:   var(--k-line);

  --color-sweetie-0:  var(--k-sweetie-0);
  --color-sweetie-1:  var(--k-sweetie-1);
  --color-sweetie-2:  var(--k-sweetie-2);
  --color-sweetie-3:  var(--k-sweetie-3);
  --color-sweetie-4:  var(--k-sweetie-4);
  --color-sweetie-5:  var(--k-sweetie-5);
  --color-sweetie-6:  var(--k-sweetie-6);
  --color-sweetie-7:  var(--k-sweetie-7);
  --color-sweetie-8:  var(--k-sweetie-8);
  --color-sweetie-9:  var(--k-sweetie-9);
  --color-sweetie-10: var(--k-sweetie-10);
  --color-sweetie-11: var(--k-sweetie-11);
  --color-sweetie-12: var(--k-sweetie-12);
  --color-sweetie-13: var(--k-sweetie-13);
  --color-sweetie-14: var(--k-sweetie-14);
  --color-sweetie-15: var(--k-sweetie-15);

  --font-display: var(--k-font-display);
  --font-body:    var(--k-font-body);
  --font-pixel:   var(--k-font-pixel);

  --radius-card:  var(--k-radius);
  --shadow-retro: var(--k-shadow);
}

/* ---------- 3. Komponenty (czysty CSS — bez @apply, działają bez builda;
   @layer components = można nadpisywać utilities Tailwinda) ---------- */

@layer components {

  /* etykieta sekcji pikselowym fontem */
  .k-eyebrow {
    font-family: var(--k-font-pixel);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--k-blue);
  }

  /* przyciski: twardy cień, wciśnięcie 3px w dół */
  .k-btn {
    display: inline-block;
    font-family: var(--k-font-display);
    font-weight: 700;
    font-size: 1rem;
    border-radius: 12px;
    padding: 11px 22px;
    cursor: pointer;
    border: 2px solid var(--k-ink);
    text-decoration: none;
    transition: transform .08s ease;
  }
  .k-btn:active { transform: translateY(3px); box-shadow: none !important; }
  .k-btn-primary   { background: var(--k-yellow); color: var(--k-ink); box-shadow: 0 3px 0 rgba(26,28,44,.9); }
  .k-btn-secondary { background: var(--k-card); color: var(--k-blue); border-color: var(--k-blue); box-shadow: 0 3px 0 rgba(59,93,201,.55); }
  .k-btn-on-dark   { background: var(--k-yellow); color: var(--k-ink); border-color: var(--k-yellow); box-shadow: 0 3px 0 rgba(244,244,244,.35); }

  /* karta treści */
  .k-card {
    background: var(--k-card);
    border: 1px solid var(--k-line);
    border-radius: var(--k-radius);
    padding: 24px;
    box-shadow: var(--k-shadow);
  }

  /* chip pikselowy: liczby, hasła caps („LEVEL 2", „+10") — nigdy zdania */
  .k-chip {
    display: inline-block;
    font-family: var(--k-font-pixel);
    font-size: 11px;
    padding: 10px 12px 8px;
    border-radius: 8px;
    background: var(--k-ink);
    color: var(--k-yellow);
  }
  .k-chip--alt { background: var(--k-yellow); color: var(--k-ink); }
  .k-chip--ok  { background: var(--k-green); color: var(--k-paper); }

  /* chip z nazwą (imię postaci, wybór dziecka) */
  .k-name-chip {
    display: inline-block;
    background: var(--k-card);
    border: 2px solid var(--k-ink);
    border-radius: 999px;
    font-family: var(--k-font-display);
    font-weight: 700;
    padding: 7px 18px;
    box-shadow: 0 3px 0 rgba(26, 28, 44, .85);
  }

  /* raster 8×8 — firmowe tło sekcji („siedzi na pikselu") */
  .k-raster {
    background:
      repeating-linear-gradient(0deg,  rgba(59, 93, 201, .05) 0 1px, transparent 1px 8px),
      repeating-linear-gradient(90deg, rgba(59, 93, 201, .05) 0 1px, transparent 1px 8px),
      var(--k-paper);
  }

  /* ciemny panel — „ekran konsoli w nocy" (galeria, świat gry) */
  .k-panel-dark {
    background: var(--k-ink);
    color: var(--k-paper);
    border-radius: var(--k-radius);
  }

  /* pasek XP: <div class="k-xp"><i class="f"></i><i></i>…</div>
     .f = zaliczony slot, .p = premiera (złoty) */
  .k-xp { display: flex; gap: 3px; }
  .k-xp i { flex: 1; height: 12px; background: var(--k-line); border-radius: 2px; }
  .k-xp i.f { background: var(--k-green); }
  .k-xp i.p { background: var(--k-yellow); }

  /* dostępny focus w kolorze interakcji */
  .k-focusable:focus-visible,
  .k-btn:focus-visible {
    outline: 3px solid var(--k-blue);
    outline-offset: 2px;
    border-radius: 4px;
  }
}

/* ---------- 4. Żółty błysk — firmowy znak zmiany (suwak ↔ kod) ---------- */

@keyframes k-flash {
  0%   { background: var(--k-yellow); }
  100% { background: transparent; }
}
.k-flash { animation: k-flash .9s ease-out 1; }

/* ---------- 5. Less motion: the system's "reduce motion" setting ----------
   Animations and transitions end at once (the end state stays).
   !important: it has to beat every animation set by the page's own styles. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}