/* gmerek.at - warstwa systemowa (2026-08-07)
   Ladowana PO styles.css. Nie duplikuje ukladu - przedefiniowuje tokeny, na ktorych
   styles.css juz stoi, i naprawia to, co lamalo WCAG AA na produkcji.

   COFNIECIE: usun <link> do tego pliku. Struktura strony nie zalezy od niego.

   CO NAPRAWIA (kontrasty policzone wzorem WCAG 2.x, nie oszacowane):
     .hero__eyebrow 12px   #E8431F na #FBFBFD = 3,87  ->  #0D5EAF na bieli = 6,49
     .kick 12,5px          3,87  ->  6,49
     .bento .num 12px      #E8431F na #F5F5F7 = 3,67  ->  6,10 na kremie
     .btn--link            3,87  ->  6,49
     .btn--primary         bialy na #E8431F = 4,00  ->  bialy na #0D5EAF = 6,49
     ::selection           4,00  ->  6,49
   Prog dla tekstu to 4,5:1. Szesc par bylo pod progiem, kazda niosla tekst 12-13 px.

   ZASADA, KTORA Z TEGO WYNIKA: vermilion #E8431F zostaje ZNAKIEM, nie sygnalem.
   Ma 4,00:1 na bieli - wystarczy dla grafiki (prog 3:1), nie wystarcza dla tekstu.
   Kreski, kropki, ramki, siec w hero - tak. Litery i wypelnienia przyciskow - nie. */

/* ---------- 1. Fonty. Self-hosted, zero zewnetrznych zapytan ---------- */

@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-var-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";
  src:url("/assets/fonts/archivo-var-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Geist";
  src:url("/assets/fonts/geist-var-latin.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Geist";
  src:url("/assets/fonts/geist-var-latin-ext.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-var-latin.woff2") format("woff2");
  font-weight:100 800; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"JetBrains Mono";
  src:url("/assets/fonts/jetbrains-mono-var-latin-ext.woff2") format("woff2");
  font-weight:100 800; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. Tokeny ---------- */

:root{
  /* powierzchnie - biel niesie strone, krem jest pasem oddechu */
  --bg:#FFFFFF;
  --bg-2:#F9F8F4;
  --bg-3:#F2F0E9;

  /* tekst */
  --ink:#14202E;      /* 16,46 na bieli */
  --ink-2:#2C3A4B;    /* 11,44 na bieli */
  --muted:#6B7280;    /*  4,83 na bieli, 4,55 na kremie - dziala na obu */

  /* linie */
  --line:rgba(11,27,46,.10);
  --line-2:rgba(11,27,46,.18);

  /* SYGNAL - to, co niesie akcje i tekst. Bylo vermilion 3,87, jest 6,49 */
  --signal:#0D5EAF;
  --signal-2:#0A4B8C;   /* hover IDZIE W CIEMNIEJSZY - jasniejszy obniza kontrast napisu */
  --signal-soft:#7AA6D3;/* akcent na granacie, 6,79 */

  /* ZNAK - vermilion. Grafika i tylko grafika */
  --mark:#E8431F;
  --mark-text:#D13C1C;  /* jesli vermilion MUSI niesc tekst: 4,80 na bieli */

  /* powierzchnie ciemne */
  --dark:#0B1B2E;
  --dark-2:#12293F;
  --on-dark:#F5F5F7;
  --on-dark-muted:rgba(245,245,247,.66);
  --line-dark:rgba(255,255,255,.14);

  /* typografia */
  --font:"Geist","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Archivo",var(--font);
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* skala krokiem sqrt(phi)=1,272 - co drugi stopien jest dokladnie phi wyzej.
     Zastepuje 19 przypadkowych rozmiarow, ktore narosly w styles.css */
  --t-2:12.4px; --t-1:15.8px; --t0:16px; --t1:20.1px; --t2:25.6px;
  --t3:32.5px;  --t4:41.4px;  --t5:52.6px; --t6:66.9px;

  /* phi w ukladzie */
  --phi:1.6180339887;
  --measure:68ch;
  --maxw:1120px;
}

/* ---------- 3. Typografia ---------- */

body{
  font-family:var(--font);
  font-size:var(--t0);
  line-height:1.618;              /* interlinia phi */
  letter-spacing:0;               /* Geist nie potrzebuje ujemnego trackingu SF */
  font-variant-numeric:tabular-nums;
}
h1,h2,h3,.brand,.hero h1,.sec-head h2{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.272;
  letter-spacing:-.015em;
}
.mono,.kick,.hero__eyebrow,.bento .num,.proj__meta,code,pre{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
}
p{max-width:var(--measure)}

/* ---------- 4. Naprawy kontrastu ---------- */

/* Eyebrow i kick niosly tekst 12 px w kolorze o kontrascie 3,87. Tekst idzie na
   sygnal, a vermilion zostaje na samej kropce - tam jest grafika, nie litera. */
.hero__eyebrow{color:var(--signal)}
.hero__eyebrow::before{
  background:var(--mark);
  box-shadow:0 0 0 4px rgba(232,67,31,.16);
}
.kick{color:var(--signal)}
.bento .num{color:var(--signal)}
.btn--link{color:var(--signal)}
.btn--link:hover{color:var(--signal-2)}

.btn--primary{
  background:var(--signal);
  box-shadow:0 8px 24px -10px rgba(13,94,175,.55);
}
.btn--primary:hover{background:var(--signal-2)}

::selection{background:var(--signal);color:#fff}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* Gradient w naglowku hero szedl z vermilionu w pomarancz i zolc - trzy kolory,
   z ktorych zaden nie przechodzi progu dla tekstu. Naglowek dostaje pelny ink.

   Podkreslenie: pierwsza wersja szla przez box-shadow inset -.22em i przy foncie
   5,8rem dawala gruby pas siedzacy nisko pod linia bazowa - czytalo sie jak tekst
   zaznaczony myszka, nie jak element projektu. Teraz cienka linia na wysokosci
   dolnego wydluzenia, w pelnym akcencie zamiast wyblaklego 16% alpha. */
.hero h1 .grad{
  background:none;
  -webkit-background-clip:initial;
  background-clip:initial;
  color:var(--ink);
  box-shadow:none;
  padding-bottom:.06em;
  border-bottom:.06em solid var(--signal);
}

/* Poswiata za naglowkiem byla rozowa - radial-gradient na rgba(232,67,31,.18),
   czyli vermilion. Przy niebieskim sygnale czytalo sie jak dwa systemy naraz.
   Idzie w chlodny odcien sygnalu, slabiej: tlo ma podpierac naglowek, nie
   konkurowac z nim. */
.hero__glow{
  background:radial-gradient(58% 55% at 50% 45%,rgba(13,94,175,.10),transparent 68%);
}

.tags li:hover{border-color:var(--signal);color:var(--signal)}
.lang a.on{background:var(--signal);color:#fff}
.nav a::after{background:var(--signal)}

/* ---------- 5. Powierzchnie ciemne ---------- */

.techband{background:var(--dark)}
.tile.b5,.card.dark{background:var(--dark-2)}

/* ---------- 6. Header jako material ---------- */

.hdr{
  background:rgba(255,255,255,.72);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  backdrop-filter:saturate(180%) blur(20px);
}
.hdr.is-scrolled{
  border-bottom-color:var(--line);
  box-shadow:0 1px 2px rgba(11,27,46,.06),0 8px 24px rgba(11,27,46,.05);
}

/* ---------- 7. Ruch ---------- */

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