/* ============================================================
   legal.css — shared styles for long-form legal subpages
   (privacy policy PL/EN). Mirrors the design tokens, theme
   system and accessibility of index.html so the pages read as
   one site and carry the visitor's theme / text-size choices.
   ============================================================ */

/* ===================== TOKENS ===================== */
:root{
  font-size: calc(112.5% * var(--a11y-scale, 1));   /* 18px base, scaled by the a11y size control */
  --maxw: 820px;
  --pad: clamp(1.1rem, 4vw, 2.5rem);

  /* Palette: navy (granat) accent on cool greys · sharp corners · Atkinson Hyperlegible */
  --accent: oklch(0.42 0.13 258);
  --ink: oklch(0.24 0.015 260);
  --bg: oklch(0.985 0.004 260);
  --radius: 3px;
  --font-display: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;

  --surface:   color-mix(in oklab, var(--bg), var(--ink) 4%);
  --surface-2: color-mix(in oklab, var(--bg), var(--ink) 7.5%);
  --border:    color-mix(in oklab, var(--bg), var(--ink) 15%);
  --border-2:  color-mix(in oklab, var(--bg), var(--ink) 26%);
  --muted:     color-mix(in oklab, var(--ink), var(--bg) 22%);
  --accent-strong: color-mix(in oklab, var(--accent), black 22%);
  --accent-text: var(--accent-strong);
  --accent-soft:   color-mix(in oklab, var(--accent), var(--bg) 86%);
  --accent-tint:   color-mix(in oklab, var(--accent), var(--bg) 93%);
  --link:          color-mix(in oklab, var(--accent), var(--ink) 34%);
  --on-accent: #ffffff;
  --shadow: 0 1px 2px color-mix(in oklab, var(--ink), transparent 88%),
            0 8px 30px color-mix(in oklab, var(--ink), transparent 90%);
}

/* Dark theme — flips ink/bg; every derived neutral recomputes via color-mix. */
html[data-theme="dark"]{ color-scheme: dark; }
html[data-theme="dark"]{
  --accent: oklch(0.64 0.15 256);
  --ink: oklch(0.94 0.012 255);
  --bg:  oklch(0.19 0.02 262);
  --muted: color-mix(in oklab, var(--ink), var(--bg) 25%);
  --accent-text: color-mix(in oklab, var(--accent), var(--ink) 45%);
  --shadow: 0 1px 2px rgba(0,0,0,.55), 0 10px 34px rgba(0,0,0,.5);
}

/* Dyslexia-friendly font swap (honours the same toggle key as the main site) */
html[data-dyslexia="on"]{
  --font-body: "Lexend", system-ui, sans-serif;
  --font-display: "Lexend", system-ui, sans-serif;
}

/* High-contrast mode (WCAG AAA push) */
html[data-contrast="high"]{
  --bg:#ffffff; --surface:#ffffff; --surface-2:#ffffff;
  --ink:#000000; --muted:#1b1b1b;
  --border:#000000; --border-2:#000000;
  --accent:#0a3aa3; --accent-strong:#082c7d; --accent-soft:#e7edff; --accent-tint:#f1f4ff;
  --link:#082c7d; --on-accent:#ffffff;
  --shadow:none;
}

/* ===================== RESET ===================== */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:var(--link); text-underline-offset:3px; }
html[data-underline="on"] a{ text-decoration:underline; }

/* Focus visibility — never remove the outline */
a:focus-visible, button:focus-visible{
  outline:3px solid var(--accent);
  outline-offset:2px;
  border-radius:var(--radius);
}

.wrap{ width:min(var(--maxw), 100%); margin-inline:auto; padding-inline:var(--pad); }

/* Skip link */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--accent-strong); color:var(--on-accent);
  padding:.6rem 1rem; border-radius:var(--radius);
}
.skip-link:focus{ left:1rem; top:1rem; }

/* ===================== HEADER ===================== */
.site-header{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  position:relative;
}
.site-header::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), transparent);
}
html[data-contrast="high"] .site-header::after{ display:none; }
.site-header__inner{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding-block:.9rem;
}
.brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; color:var(--ink); font-family:var(--font-display); font-weight:700; }
.brand__logo{ width:36px; height:36px; }
.brand__name{ display:inline-flex; flex-direction:column; line-height:1.02; letter-spacing:-.01em; }
.brand__sub{ font-size:.62em; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }

.header-actions{ margin-left:auto; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }

.seg{ display:inline-flex; border:1px solid var(--border-2); border-radius:var(--radius); overflow:hidden; }
.seg__btn{ background:transparent; border:0; padding:.28rem .55rem; color:var(--muted); border-right:1px solid var(--border-2); }
.seg__btn:last-child{ border-right:0; }
.seg__btn.s1{ font-size:.82rem; } .seg__btn.s2{ font-size:.96rem; } .seg__btn.s3{ font-size:1.12rem; }
.seg__btn[aria-pressed="true"]{ background:var(--accent-strong); color:var(--on-accent); }

.iconbtn{ background:transparent; border:1px solid var(--border-2); border-radius:var(--radius); width:2.1rem; height:2.1rem; display:inline-flex; align-items:center; justify-content:center; color:var(--ink); }
.theme-btn::before{ content:"\263E"; font-size:1rem; }              /* moon */
html[data-theme="dark"] .theme-btn::before{ content:"\2600"; }      /* sun */

.lang-btn{ background:transparent; border:1px solid var(--border-2); border-radius:var(--radius); padding:.3rem .6rem; letter-spacing:.02em; font-size:.9rem; }
.lang-btn__cur{ font-weight:700; }
.lang-btn__sep{ opacity:.5; margin-inline:.15rem; }
.lang-btn__alt{ color:var(--muted); }

.backlink{ text-decoration:none; color:var(--link); font-size:.92rem; display:inline-flex; align-items:center; gap:.35rem; }
.backlink::before{ content:"\2190"; }

/* ===================== DOCUMENT ===================== */
.doc{ padding-block:clamp(2rem,5vw,3.5rem) clamp(3rem,7vw,5rem); }
.doc__eyebrow{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-text); font-weight:700; margin:0 0 .6rem; }
.doc h1{ font-family:var(--font-display); font-weight:700; letter-spacing:-.015em; line-height:1.1; font-size:clamp(1.8rem,5vw,2.6rem); margin:0 0 .5rem; }
.doc__meta{ color:var(--muted); font-size:.92rem; margin:0 0 2rem; }
.doc__lead{ font-size:1.08rem; color:var(--ink); background:var(--accent-tint); border-left:3px solid var(--accent); padding:1rem 1.15rem; border-radius:var(--radius); margin:0 0 2.2rem; }

.doc h2{ font-family:var(--font-display); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.25rem,3.5vw,1.55rem); line-height:1.2; margin:2.4rem 0 .5rem; scroll-margin-top:1rem; }
.doc h2 .doc__num{ color:var(--accent-text); }
.doc h3{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; margin:1.5rem 0 .4rem; }
.doc p{ margin:0 0 1rem; text-wrap:pretty; }
.doc ul, .doc ol{ margin:0 0 1rem; padding-left:1.4rem; }
.doc li{ margin-bottom:.5rem; }
.doc strong{ color:var(--ink); }
.doc a{ color:var(--link); }

/* Placeholder chips — fields to fill after registration / store publish */
.todo{
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:.86em;
  background:color-mix(in oklab, #d9822b, var(--bg) 80%);
  color:color-mix(in oklab, #8a4b12, var(--ink) 20%);
  border:1px dashed color-mix(in oklab, #d9822b, var(--ink) 10%);
  border-radius:var(--radius);
  padding:.05em .4em;
  white-space:nowrap;
}
html[data-theme="dark"] .todo{
  background:color-mix(in oklab, #d9822b, var(--bg) 78%);
  color:#f2c48a;
}

/* Contact / store card */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.2rem 1.3rem;
  box-shadow:var(--shadow);
  margin:1rem 0 1.5rem;
}
.stores{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:.6rem; }
/* Store badges: black chip with white label, matching the official badge look.
   Scoped under .doc so the badge colour wins over the `.doc a` link colour
   (which is more specific than a bare .store-btn and was turning the text navy). */
.doc .store-btn,
.doc .store-btn:visited{
  display:inline-flex; align-items:center; gap:.6rem;
  background:#000; color:#fff;
  text-decoration:none; line-height:1;
  padding:.55rem 1rem; border-radius:var(--radius);
  border:1px solid #000;
}
html[data-theme="dark"] .doc .store-btn{ border-color:rgba(255,255,255,.32); }
.doc .store-btn:hover{ background:#1a1a1a; }
.store-btn__logo{ height:24px; width:auto; flex:none; display:block; }
.store-btn__sub{ display:block; font-size:.6rem; font-weight:400; letter-spacing:.05em; text-transform:uppercase; opacity:.9; }
.store-btn__main{ display:block; font-size:1.05rem; font-weight:600; line-height:1.15; letter-spacing:.01em; }

.toc{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.3rem 1.1rem; margin:0 0 2.4rem; }
.toc h2{ font-size:.9rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin:0 0 .6rem; }
.toc ol{ margin:0; padding-left:1.3rem; columns:2; column-gap:2rem; }
.toc li{ margin-bottom:.35rem; }
@media (max-width:560px){ .toc ol{ columns:1; } }

/* ===================== FOOTER ===================== */
.site-footer{ background:var(--surface); border-top:1px solid var(--border); padding-block:2rem 1.4rem; position:relative; }
.site-footer::before{ content:""; position:absolute; top:-1px; left:0; right:0; height:2px; background:linear-gradient(90deg, transparent, var(--accent), transparent); }
html[data-contrast="high"] .site-footer::before{ display:none; }
.site-footer__inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
.footlink{ color:var(--link); text-decoration:none; font-size:.92rem; }
.site-footer__bar{ margin-top:1.4rem; padding-top:1.1rem; border-top:1px solid var(--border); color:var(--muted); font-size:.88rem; }

@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
}