/* Welon – wspólne tokeny (strona sprzedażowa, logowanie, aplikacja).
   Kierunek: bordowy atrament zaproszenia + piwonia, prawie biały papier bez „kremowego” zabarwienia. */
:root{
  --wine-900:oklch(0.24 0.075 8);
  --wine-800:oklch(0.30 0.095 8);
  --wine:oklch(0.36 0.115 8);       /* marka */
  --wine-600:oklch(0.44 0.135 9);
  --peony:oklch(0.69 0.155 14);     /* akcent: CTA na ciemnym, wyróżnienia */
  --peony-200:oklch(0.90 0.05 12);
  --blush:oklch(0.96 0.018 10);
  --champagne:oklch(0.82 0.075 78);
  --ink:oklch(0.23 0.025 8);
  --ink-2:oklch(0.40 0.025 8);      /* tekst drugorzędny – kontrast ≥ 4.5:1 na bieli */
  --line:oklch(0.91 0.012 8);
  --line-2:oklch(0.86 0.016 8);
  --bg:oklch(0.985 0.004 8);
  --surface:#fff;

  /* kolory modułów aplikacji */
  --c-tables:var(--wine-600);
  --c-budget:oklch(0.47 0.085 162);
  --c-tasks:oklch(0.58 0.12 62);
  --c-invites:oklch(0.47 0.12 305);
  --ok:oklch(0.52 0.11 155);   --ok-bg:oklch(0.95 0.035 155);
  --warn:oklch(0.58 0.13 60);  --warn-bg:oklch(0.96 0.04 75);
  --bad:oklch(0.52 0.17 25);   --bad-bg:oklch(0.95 0.035 25);

  --display:"Gloock",Georgia,"Times New Roman",serif;
  --sans:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r-sm:8px; --r:12px; --r-lg:20px; --r-xl:28px;
  --shadow-1:0 1px 2px oklch(0.3 0.05 8 / .06),0 2px 8px oklch(0.3 0.05 8 / .05);
  --shadow-2:0 2px 6px oklch(0.3 0.05 8 / .07),0 18px 40px oklch(0.3 0.06 8 / .10);
  --ease:cubic-bezier(.22,1,.36,1);
  /* warstwy */
  --z-sticky:20; --z-nav:30; --z-overlay:60; --z-modal:70; --z-toast:90;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
button,input,select,textarea{font:inherit;color:inherit}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
:focus-visible{outline:2.5px solid var(--peony);outline-offset:2px;border-radius:4px}

.btn{--b:var(--wine);display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;background:var(--b);color:#fff;
  padding:12px 20px;border-radius:var(--r);font-weight:700;font-size:15px;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{background:var(--wine-800)}
.btn:active{transform:translateY(1px)}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.peony{background:var(--peony);color:var(--wine-900)}
.btn.peony:hover{background:oklch(0.74 0.15 14)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--blush);border-color:var(--peony-200)}
.btn.lg{padding:16px 28px;font-size:17px;border-radius:14px}
.btn.sm{padding:7px 12px;font-size:13.5px;border-radius:9px}
.btn .spin{width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.field{display:grid;gap:6px;font-size:13.5px;font-weight:700;color:var(--ink-2)}
.input,.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line-2);background:#fff;border-radius:10px;padding:11px 13px;font-size:15px;font-weight:500;color:var(--ink);outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--wine-600);box-shadow:0 0 0 4px oklch(0.69 0.155 14 / .18)}
.field input::placeholder,.input::placeholder,textarea::placeholder{color:oklch(0.52 0.02 8)}
.err{color:var(--bad);font-size:14px;font-weight:600}

.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--wine);flex:none}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

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

/* Znak Welonu (welon z grzebyczkiem) – kolory sterowane z CSS */
.mark{display:block;flex:none}
.mark .mk-bg{fill:var(--peony)}
.mark .mk-fg{fill:var(--wine-900)}
.mark .mk-fold{fill:none;stroke:var(--peony);stroke-width:1.6;stroke-linecap:round;opacity:.45}

/* Logo Welonu: napis, w którym „o” to pierścionek z oczkiem */
.wordmark{display:inline-flex;align-items:baseline;font-family:var(--display);font-weight:400;line-height:1;letter-spacing:-.01em;white-space:nowrap}
.wm-ring{width:.6em;height:.87em;margin:0 .03em 0 .035em;align-self:baseline;transform:translateY(.035em);overflow:visible}
.wm-ring circle{fill:none;stroke:currentColor;stroke-width:5.6}
.wm-ring path{fill:var(--peony)}
.ic-bg{fill:var(--wine-900)}
.ic-ring{fill:none;stroke:#fff;stroke-width:4.6}
.ic-gem{fill:var(--peony)}