/* ═══════════════════════════════════════════════════════════════════════
   Mark366 — wspólny język wizualny dla części na WordPressie.

   Serwis stoi na dwóch silnikach: marketing w Next, sklep i kursy w WordPressie.
   Odwiedzający nie ma o tym pojęcia i nie powinien mieć — przejście z /uslugi/
   do /produkty/ ma być niezauważalne. Ten plik odtwarza tokeny i typografię
   z `mark366-www/app/globals.css`.

   ⚠️ Przy zmianie tokenów w Next trzeba je zmienić i tutaj. Nie da się tego
   uwspólnić bez budowania — Next kompiluje swoje CSS-y do skrótów.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. tokeny — kopia z globals.css ─────────────────────────────────── */
:root{
  --papier:#f4f3ef; --karta:#fffefb; --atrament:#101014; --tekst:#4a4a52; --cichy:#696971;
  --kreska:#e0ddd4; --wlos:#eeebe3; --noc:#0d0d10; --noc-2:#16161a;
  --acc:#7d8b9c;
  --cien-1:0 1px 2px rgba(16,16,20,.04), 0 12px 30px -18px rgba(16,16,20,.18);
  --cien-2:0 2px 8px rgba(16,16,20,.06), 0 44px 80px -30px rgba(16,16,20,.32);
  --e:cubic-bezier(.2,.72,.24,1);
  --kol:88px;
  --f-disp:'Jost'; --f-body:'Public Sans';
  /* Granica pola formularza musi mieć 3:1 wobec tła. `--kreska` ma 1,35:1 —
     wystarczy na linię działową, nie wystarczy na krawędź pola do wpisania. */
  --obrys-pola:color-mix(in srgb,var(--atrament) 50%,var(--papier));
}
@media (prefers-color-scheme:dark){
  :root{ --papier:#0d0d10; --karta:#16161a; --atrament:#f4f3ef; --tekst:#a4a4ac; --cichy:#8f8f99;
    --kreska:#232329; --wlos:#1b1b20;
    --cien-1:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -18px rgba(0,0,0,.8);
    --cien-2:0 2px 8px rgba(0,0,0,.55), 0 44px 80px -30px rgba(0,0,0,.9); }
}
:root[data-theme="dark"]{ --papier:#0d0d10; --karta:#16161a; --atrament:#f4f3ef; --tekst:#a4a4ac;
  --cichy:#8f8f99; --kreska:#232329; --wlos:#1b1b20;
  --cien-1:0 1px 2px rgba(0,0,0,.45), 0 12px 30px -18px rgba(0,0,0,.8);
  --cien-2:0 2px 8px rgba(0,0,0,.55), 0 44px 80px -30px rgba(0,0,0,.9); }
:root[data-theme="light"]{ --papier:#f4f3ef; --karta:#fffefb; --atrament:#101014; --tekst:#4a4a52;
  --cichy:#696971; --kreska:#e0ddd4; --wlos:#eeebe3;
  --cien-1:0 1px 2px rgba(16,16,20,.04), 0 12px 30px -18px rgba(16,16,20,.18);
  --cien-2:0 2px 8px rgba(16,16,20,.06), 0 44px 80px -30px rgba(16,16,20,.32); }

/* ── 2. podstawa ─────────────────────────────────────────────────────── */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--papier); color:var(--atrament);
  font-family:var(--f-body),system-ui,sans-serif; font-size:18px; line-height:1.62;
  -webkit-font-smoothing:antialiased; overflow-x:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit}

/* Ta sama szerokość kolumny co w Next — inaczej treść „przeskakuje" w bok
   przy przejściu ze strony marketingowej do sklepu. */
.m366-srodek{max-width:1320px; margin:0 auto; padding:0 clamp(20px,3vw,40px)}

/* ── 3. typografia ───────────────────────────────────────────────────── */
h1,h2,h3,h4,.m366-disp{font-family:var(--f-disp),sans-serif; font-weight:300;
  letter-spacing:-.026em; margin:0; color:var(--atrament)}
h1{font-size:clamp(38px,5.4vw,76px); line-height:1.03; text-wrap:balance}
h2{font-size:clamp(27px,3.4vw,48px); line-height:1.06; text-wrap:balance}
h3{font-size:clamp(20px,2.1vw,30px); line-height:1.16}
h4{font-size:19px; line-height:1.28; font-weight:400}
h1 em,h2 em,h3 em{font-style:normal; font-weight:500}
p{margin:0 0 1em; line-height:1.62; color:var(--tekst)}
p:last-child{margin-bottom:0}
strong,b{color:var(--atrament); font-weight:600}

.m366-duzy{font-size:clamp(18px,1.7vw,23px); line-height:1.48; color:var(--tekst)}
.m366-maly{font-size:15px; color:var(--cichy); line-height:1.5}
.m366-etykieta{font-family:var(--f-disp),sans-serif; font-size:11px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--cichy); font-weight:500; display:block}

/* ── 4. przyciski ────────────────────────────────────────────────────── */
/* Marka nie zaokrągla. Promień 2 px to jedyne ustępstwo — przy 0 krawędź
   na ekranach o dużej gęstości wygląda na artefakt renderowania. */
.m366-przycisk,
.woocommerce a.button, .woocommerce button.button, .woocommerce input.button,
.woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt,
.wc-block-components-button{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body),system-ui,sans-serif; font-size:15px; font-weight:600;
  line-height:1; letter-spacing:0; text-decoration:none; text-transform:none;
  padding:15px 26px; border-radius:2px; border:1px solid var(--atrament);
  background:var(--atrament); color:var(--papier); cursor:pointer;
  transition:background .22s var(--e), color .22s var(--e),
             border-color .22s var(--e), transform .1s var(--e);
  -webkit-appearance:none; appearance:none}
.m366-przycisk:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover, .woocommerce input.button:hover,
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover, .wc-block-components-button:hover{
  background:transparent; color:var(--atrament); border-color:var(--atrament)}
/* Bez ruchu na przyciskach poza wciśnięciem — reszta serwisu trzyma tę zasadę. */
.m366-przycisk:active,
.woocommerce a.button:active, .woocommerce button.button:active,
.woocommerce input.button:active, .wc-block-components-button:active{transform:scale(.985)}

.m366-przycisk.pusty,
.woocommerce a.button.m366-pusty{background:transparent; color:var(--atrament)}
.m366-przycisk.pusty:hover,
.woocommerce a.button.m366-pusty:hover{background:var(--atrament); color:var(--papier)}

/* ── 5. pola formularzy ──────────────────────────────────────────────── */
input[type=text],input[type=email],input[type=tel],input[type=url],input[type=password],
input[type=number],input[type=search],textarea,select,
.wc-block-components-text-input input,.tutor-form-control{
  font-family:var(--f-body),system-ui,sans-serif; font-size:16px; line-height:1.4;
  color:var(--atrament); background:var(--karta);
  border:1px solid var(--obrys-pola); border-radius:2px; padding:13px 15px; width:100%;
  transition:border-color .2s var(--e), box-shadow .2s var(--e); -webkit-appearance:none}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--atrament);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--atrament) 9%,transparent)}
label{font-size:14px; color:var(--tekst); font-weight:600}

/* ── 6. dostępność ───────────────────────────────────────────────────── */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--acc); outline-offset:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}