/* LLOXY — tokeny identyfikacji wizualnej, v1.0
   Zasada: stałe marki nigdy nie zmieniają się z motywem.
   Zmienia się wyłącznie warstwa --bg / --fg / --accent-text. */

:root{
  /* ── STAŁE MARKI ───────────────────────────────────────── */
  --lx-ink:      #131A26;  /* Atrament  */
  --lx-depth:    #1B2534;  /* Głębia    */
  --lx-paper:    #E7E8E2;  /* Papier    */
  --lx-magenta:  #DE1B76;  /* Kurs      */
  --lx-teal:     #2E9E92;  /* Sonda     */
  --lx-haze:     #6E7A8A;  /* Mgła      */
  --lx-angle:    -15deg;   /* kąt marki */

  /* ── MOTYW JASNY ───────────────────────────────────────── */
  --bg:#E7E8E2; --surface:#F1F2ED; --surface-2:#DBDDD4;
  --fg:#131A26; --muted:#57637A; --line:#C8CBC0;
  --accent-text:#B01260;   /* magenta czytelna w małym tekście na jasnym — 5,5:1 */
  --teal-text:#17756C;     /* 4,5:1 */
}

@media (prefers-color-scheme:dark){
  :root{
    --bg:#131A26; --surface:#1A2331; --surface-2:#222D3D;
    --fg:#E7E8E2; --muted:#97A1B2; --line:#2A3546;
    --accent-text:#FF5BA5; /* 6,1:1 na atramencie */
    --teal-text:#3FB3A5;   /* 6,8:1 */
  }
}

/* nadpisanie ręcznym przełącznikiem motywu */
:root[data-theme="dark"]{
  --bg:#131A26; --surface:#1A2331; --surface-2:#222D3D;
  --fg:#E7E8E2; --muted:#97A1B2; --line:#2A3546;
  --accent-text:#FF5BA5; --teal-text:#3FB3A5;
}
:root[data-theme="light"]{
  --bg:#E7E8E2; --surface:#F1F2ED; --surface-2:#DBDDD4;
  --fg:#131A26; --muted:#57637A; --line:#C8CBC0;
  --accent-text:#B01260; --teal-text:#17756C;
}

/* ── TYPOGRAFIA ─────────────────────────────────────────── */
:root{
  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}

/* Nagłówki: Archivo w wersji rozszerzonej. Wymaga osi wdth — plik zmienny. */
h1,h2,h3{
  font-family:var(--font-sans);
  font-weight:800; font-stretch:118%;
  letter-spacing:-.015em; line-height:1.04;
  text-wrap:balance;
}

/* Motto — zawsze małe litery, zawsze z kropką, kropka w magencie. */
.lx-motto{
  font-family:var(--font-sans);
  font-weight:500; font-stretch:92%;
  letter-spacing:-.03em; line-height:1;
}
.lx-motto::after{content:"."; color:var(--lx-magenta)}

/* Kreska sekcji pod kątem marki. */
.lx-tick{
  display:inline-block; width:16px; height:2px;
  background:var(--lx-magenta); transform:rotate(var(--lx-angle));
}

/* Tło w siatce loksodrom — subtelnie, wyłącznie jako warstwa dekoracyjna. */
.lx-grid{
  background-image:
    repeating-linear-gradient(var(--lx-angle), color-mix(in srgb, var(--fg) 5%, transparent) 0 1px, transparent 1px 72px),
    repeating-linear-gradient(calc(90deg + var(--lx-angle)), color-mix(in srgb, var(--fg) 5%, transparent) 0 1px, transparent 1px 72px);
}