/* imionka.app: tokeny z aplikacji (src/index.css), czcionki z własnego serwera. */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/young-serif-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/young-serif-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/nunito-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/assets/fonts/nunito-latin.woff2) format('woff2');
  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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: light dark;
  --cream: #F6F0E8;
  --paper: #FBF7F1;
  --surface: #FFFDF9;
  --sand: #EDE3D3;
  --sand-deep: #D9C7AE;
  --peach: #F2B79A;
  --peach-soft: #F8D9C8;
  --peach-ink: #9E5535;
  --blue: #A9C7D2;
  --blue-soft: #D6E5EA;
  --blue-ink: #476978;
  --sage: #7FAF78;
  --sage-soft: #DCEBDD;
  --sage-ink: #44703F;
  --no: #D97B6C;
  --no-soft: #F5D8D2;
  --ink: #3B3530;
  --ink-soft: #625850;
  --line: #E4D8C8;
  --badge: url(/assets/badge-app-store-pl-black.svg);

  --font-display: 'Young Serif', 'Georgia', serif;
  --font-body: 'Nunito', system-ui, sans-serif;

  --space-xs: 4px;
  --space-sm: 8px;
  --space-ms: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  --radius-card: 22px;
  --radius-pill: 999px;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);
  --page: min(1120px, 100% - 2 * clamp(20px, 5vw, 48px));
}

@media (prefers-color-scheme: dark) {
  :root {
    --cream: #1B1916;
    --paper: #211E1A;
    --surface: #2A2622;
    --sand: #34302A;
    --sand-deep: #4A433A;
    --peach: #E0A487;
    --peach-soft: #4A3328;
    --peach-ink: #F0B497;
    --blue: #7FA3B1;
    --blue-soft: #2B3A40;
    --blue-ink: #A9CAD6;
    --sage: #8FBF88;
    --sage-soft: #2C3B2B;
    --sage-ink: #A6D29F;
    --no: #E08F81;
    --no-soft: #4A2C27;
    --ink: #F2ECE3;
    --ink-soft: #CFC5B8;
    --line: #3D3730;
    --badge: url(/assets/badge-app-store-pl-white.svg);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blue-ink); outline-offset: 3px; border-radius: 6px; }

.wrap { width: var(--page); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 4.2vw, 4.6rem); }
h2 { font-size: clamp(1.9rem, 1.4rem + 2.2vw, 3rem); }
h3 { font-size: 1.35rem; line-height: 1.2; }
p { margin: 0; text-wrap: pretty; }

.eyebrow {
  font-weight: 800;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--peach-ink);
}
.lead { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3rem); color: var(--ink-soft); max-width: 34ch; }

/* App Store badge: oficjalna grafika Apple, wersja PL */
.store {
  display: inline-block;
  width: 168px;
  height: 56px;
  background: var(--badge) left center / contain no-repeat;
  border-radius: 10px;
  flex: none;
}
.store--sm { width: 132px; height: 44px; }
.store span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Nagłówek */
.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block: var(--space-lg);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-ms);
  min-height: 44px;
  text-decoration: none;
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.brand img { width: 40px; height: 40px; border-radius: 10px; }

/* Stopka */
.foot {
  border-top: 1px solid var(--line);
  padding-block: var(--space-xl) var(--space-2xl);
  color: var(--ink-soft);
  font-size: 0.9375rem;
}
.foot .wrap { display: flex; flex-wrap: wrap; gap: var(--space-md) var(--space-xl); align-items: center; justify-content: space-between; }
.foot nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }
.foot a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }

/* Strony tekstowe: /privacy, /p */
.doc { padding-block: var(--space-xl) var(--space-4xl); }
.doc h1 { font-size: clamp(2.2rem, 1.7rem + 2.4vw, 3.4rem); margin-bottom: var(--space-md); }
.doc .meta { color: var(--ink-soft); margin-bottom: var(--space-2xl); }
.doc article { max-width: 32em; display: grid; gap: var(--space-xl); }
.doc section { display: grid; gap: var(--space-sm); }
.doc section h2 { font-size: 1.4rem; line-height: 1.25; }
.doc section p { color: var(--ink-soft); }
.doc .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: var(--space-2xl); font-weight: 700; color: var(--peach-ink); }