/* =========================================================================
   seotonin.pl — design tokens v2
   Kierunek: „żywe demo + serotonina”. Jasno, luminescencyjnie, płynnie.
   Źródło: Claude Design → design_handoff_wordpress/design/_tokens.css
   PRZENIESIONE BEZ ZMIAN poza @import fontów (self-host, RODO) — patrz fonts.css.
   ========================================================================= */

:root {
  /* --- papier i atrament: neutralne z fioletowym podkładem, nie szare --- */
  --paper:#FBFAF7;  --paper-2:#FFFFFF; --paper-3:#F3F1EC;
  --ink-950:#0B0A12; --ink-900:#12101C; --ink-800:#1B1830; --ink-700:#282343;
  --ink-600:#3A3459; --ink-500:#544D74; --ink-400:#6B6486; --ink-300:#A29CB3;
  --ink-200:#C9C5D4; --ink-100:#E4E1EA; --ink-050:#F2F0F5;

  /* --- serotonina: trzy impulsy, zawsze w tej kolejności --- */
  --imp:#4B3BFF;      /* impuls — kolor decyzji, główne CTA */
  --glow:#FF3D8B;     /* blask — energia, akcent emocjonalny */
  --warm:#FFB03A;     /* ciepło — potwierdzenie, nagroda */
  --calm:#00B8A9;     /* spokój — stan poprawny, wynik */
  --imp-soft:rgba(75,59,255,.12);
  --glow-soft:rgba(255,61,139,.12);

  /* gradienty są tokenem, nie ozdobą — powtarzają się w CTA, obrysach i tle */
  --grad:linear-gradient(115deg,var(--imp) 0%,var(--glow) 48%,var(--warm) 100%);
  /* gradient POD TEKSTEM musi trzymać kontrast na obu końcach — pełny --grad
     kończy się bursztynem, na którym biel ma 1,8:1. Do CTA służy wyłącznie ten. */
  --grad-cta:linear-gradient(115deg,var(--imp) 0%,#C61763 100%);
  --grad-rev:linear-gradient(115deg,var(--warm) 0%,var(--glow) 52%,var(--imp) 100%);
  --grad-quiet:linear-gradient(140deg,rgba(75,59,255,.14),rgba(255,61,139,.10) 45%,rgba(255,176,58,.12));

  /* --- filary usług: każdy dostaje jeden impuls, AI dostaje cały gradient --- */
  --svc-seo:#4B3BFF;    --svc-ads:#FF3D8B;    --svc-web:#00B8A9;    --svc-social:#FFB03A;
  --svc-seo-ink:#3626D6; --svc-ads-ink:#C61763; --svc-web-ink:#00776D; --svc-social-ink:#A66A00;

  /* --- sygnały --- */
  --ok:#0FA97F; --warn:#E08A00; --err:#E0344B;

  /* --- semantyka: jasno jest domyślnie --- */
  --bg:var(--paper); --bg-raised:var(--paper-2); --bg-sunken:var(--paper-3);
  --fg:var(--ink-900); --fg-muted:var(--ink-500); --fg-faint:var(--ink-400);
  --line:rgba(27,24,48,.10); --line-strong:rgba(27,24,48,.20);
  --accent:var(--imp); --accent-fg:#FFFFFF;
  --shadow-1:0 1px 2px rgba(27,24,48,.06);
  --shadow-2:0 18px 44px -22px rgba(27,24,48,.28);
  --shadow-lift:0 28px 60px -28px rgba(75,59,255,.42);

  /* --- typografia: display jest zmienny i to jest cały pomysł --- */
  --font-display:'Bricolage Grotesque','Segoe UI',system-ui,sans-serif;
  --font-text:'Instrument Sans','Inter','Segoe UI',system-ui,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --fs-display:clamp(3rem,1.2rem + 7.6vw,8rem);
  --fs-h1:clamp(2.2rem,1.3rem + 4vw,4.6rem);
  --fs-h2:clamp(1.7rem,1.1rem + 2.6vw,3.2rem);
  --fs-h3:clamp(1.3rem,1.05rem + 1.1vw,2rem);
  --fs-h4:clamp(1.05rem,.98rem + .45vw,1.35rem);
  --fs-lead:clamp(1.08rem,1rem + .6vw,1.4rem);
  --fs-body:1.0625rem; --fs-sm:.9375rem; --fs-xs:.8125rem;
  --lh-tight:.92; --lh-head:1.08; --lh-body:1.62;
  --tracking-over:.16em;

  /* --- rytm 4pt --- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px;
  --section-y:clamp(72px,10vw,140px);
  --gutter:clamp(20px,5vw,72px);
  --maxw:1320px; --maxw-prose:66ch;

  /* --- kształt i ruch --- */
  --r-sm:10px; --r-md:16px; --r-lg:26px; --r-xl:36px; --r-2xl:48px; --r-full:999px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.4,.64,1); /* lekkie przestrzelenie */
  --dur-1:150ms; --dur-2:300ms; --dur-3:600ms; --dur-4:1100ms;
}

[data-theme="dark"] {
  --bg:var(--ink-950); --bg-raised:#151327; --bg-sunken:#08070F;
  --fg:#F4F2FA; --fg-muted:var(--ink-300); --fg-faint:var(--ink-400);
  --line:rgba(244,242,250,.12); --line-strong:rgba(244,242,250,.24);
  --imp:#7A6BFF; --glow:#FF6BA5; --warm:#FFC163; --calm:#2BE0CD;
  --imp-soft:rgba(122,107,255,.18); --glow-soft:rgba(255,107,165,.18);
  --accent:var(--imp); --accent-fg:#0B0A12;
  --svc-seo-ink:var(--imp); --svc-ads-ink:var(--glow);
  --svc-web-ink:var(--calm); --svc-social-ink:var(--warm);
  --shadow-2:0 18px 44px -22px rgba(0,0,0,.7);
  --shadow-lift:0 28px 60px -28px rgba(122,107,255,.5);
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font-text);
  font-size:var(--fs-body);line-height:var(--lh-body);-webkit-font-smoothing:antialiased;
  transition:background var(--dur-2) var(--ease),color var(--dur-2) var(--ease)}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);line-height:var(--lh-head);
  font-weight:600;letter-spacing:-.03em;font-variation-settings:'wdth' 100,'opsz' 48}
a{color:inherit}
img{max-width:100%;display:block}
:focus-visible{outline:2.5px solid var(--imp);outline-offset:3px;border-radius:var(--r-sm)}
::selection{background:var(--glow);color:#fff}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.overline{margin:0;font-family:var(--font-text);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:var(--tracking-over);text-transform:uppercase;color:var(--fg-faint)}

/* tekst malowany gradientem — jedna klasa, używana oszczędnie */
.grad-text{background:var(--grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}

/* obrys gradientowy bez dodatkowego elementu */
.grad-edge{position:relative;background:var(--bg-raised)}
.grad-edge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}

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