/* ============================================================
   base.css. The shared foundation for every page of the site:
   design tokens, reset and the accessibility modes driven by the
   data-* attributes on <html> (theme, contrast, dyslexia, motion,
   underline, spacing) plus the --a11y-scale text-size variable.

   This file is the single source of truth for those three layers.
   Page-level stylesheets (index.html's inline <style>, legal.css,
   aexpo.css) build their components on top of it and must not
   redefine the tokens below.

   Load order matters: base.css first, then the page stylesheet.
   Each page still sets its own --maxw, since the landing page and
   the document pages use deliberately different measures.
   ============================================================ */


/* ------------------------------------------------------------
   Fonts, served from this origin.

   They used to come from fonts.googleapis.com, which cost two DNS
   lookups and two TLS handshakes in series before a single letter could
   be painted: the stylesheet had to arrive from one Google host before
   the browser learned the font URLs on a second one. Lighthouse put that
   chain at 813 ms of blocked rendering on a mobile connection, more than
   the hero image cost. Self-hosted, the files ride the connection that
   is already open for the HTML.

   Split into latin and latin-ext exactly the way Google splits it, so a
   page loads only the ranges it writes in. Polish needs both: "o z
   kreska" sits in latin, the other nine diacritics in latin-ext.

   Lexend is here only for the dyslexia-friendly switch in the
   accessibility panel. A declared @font-face costs nothing until
   something on the page actually renders in it, so visitors who never
   touch the switch never download it. The old Google stylesheet listed
   Lexend on the critical path for everyone.

   Subset to the ranges declared below (pyftsubset, keeping kerning and
   the mark features), which is what makes these files smaller than the
   ones Google was serving. Files are immutable, so their URLs carry no
   version hash; firebase.json caches them for a year.

   Both families are OFL 1.1. See fonts/LICENSE.txt.
   ------------------------------------------------------------ */
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  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:"Atkinson Hyperlegible";
  src:url(/fonts/atkinson-hyperlegible-latin-ext-400-normal.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  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:"Atkinson Hyperlegible";
  src:url(/fonts/atkinson-hyperlegible-latin-ext-700-normal.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Atkinson Hyperlegible";
  src:url(/fonts/atkinson-hyperlegible-latin-400-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  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:"Atkinson Hyperlegible";
  src:url(/fonts/atkinson-hyperlegible-latin-ext-400-italic.woff2) format("woff2");
  font-weight:400; font-style:italic; font-display:swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Lexend";
  src:url(/fonts/lexend-latin-400-normal.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  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:"Lexend";
  src:url(/fonts/lexend-latin-ext-400-normal.woff2) format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Lexend";
  src:url(/fonts/lexend-latin-700-normal.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  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:"Lexend";
  src:url(/fonts/lexend-latin-ext-700-normal.woff2) format("woff2");
  font-weight:700; font-style:normal; font-display:swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:"Lexend";
  src:url(/fonts/lexend-latin-800-normal.woff2) format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
  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:"Lexend";
  src:url(/fonts/lexend-latin-ext-800-normal.woff2) format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
  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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ===================== TOKENS ===================== */
:root{
  font-size: calc(112.5% * var(--a11y-scale, 1));   /* 18px base, scaled by the a11y size control */
  --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;
  /* Photographs and illustrations are rounded far more than controls are: the
     3px of --radius reads as a crop error on a picture. Every image container
     uses this, so the treatment stays identical across the site. */
  --radius-media: 16px;
  --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%);
  /* Border of an interactive control. WCAG 1.4.11 wants 3:1 against what sits
     next to it, and --border/--border-2 are decorative weights that reach only
     ~1.4-1.8:1, fine for a divider, not for the edge of a field somebody has
     to find. Used only on controls, so dividers keep their light touch. */
  --border-control: color-mix(in oklab, var(--bg), var(--ink) 55%);
  /* Focus ring. Kept as its own token because --accent-strong is dark enough to
     disappear against the dark theme's cards: it measured 2.84:1 there, under
     the 3:1 that WCAG asks of anything conveying a state. */
  --focus-ring: var(--accent-strong);
  --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%);

  /* Secondary accent + glows, decorative, used by the landing page only */
  --accent-2: oklch(0.66 0.11 245);
  --glow-1: color-mix(in oklab, var(--accent), transparent 80%);
  --glow-2: color-mix(in oklab, var(--accent-2), transparent 82%);
}

/* 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);

  --accent-2: oklch(0.66 0.12 245);
  --glow-1: color-mix(in oklab, var(--accent), transparent 70%);
  --glow-2: color-mix(in oklab, var(--accent-2), transparent 74%);
  /* Light enough to stay visible on --bg, --surface and --surface-2 alike. */
  --focus-ring: var(--accent-text);
}

/* Dyslexia-friendly font swap */
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; --border-control:#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);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
/* Long unbreakable runs (an e-mail address, a 22-letter Polish word at the
   largest text size) may break mid-word rather than widen the page. Only acts
   when a word cannot fit on a line of its own, so ordinary text is untouched. */
p, li, dd, a{ overflow-wrap:anywhere; }
button{ font:inherit; color:inherit; cursor:pointer; }
a{ color:var(--link); text-underline-offset:3px; }

/* ===================== LAYOUT ===================== */
/* The centred content column. Every page sets its own --maxw: the landing
   page runs wide, the document pages use a narrower reading measure. */
.wrap{
  width:100%;
  max-width:var(--maxw);
  margin-inline:auto;
  padding-inline:var(--pad);
}

/* ===================== ACCESSIBILITY MODES ===================== */
/* Underline links */
html[data-underline="on"] a{ text-decoration:underline; }
html[data-underline="on"] .btn{ text-decoration:none; }

/* Wider text spacing */
html[data-spacing="wide"] body{ line-height:1.85; letter-spacing:0.02em; word-spacing:0.16em; }
html[data-spacing="wide"] p{ margin-bottom:0.4em; }

/* Reduced motion: the explicit toggle and the OS-level preference */
html[data-motion="reduce"] *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
}

/* Focus visibility: never remove the outline */
:where(a,button,[role="switch"],input,select,summary):focus-visible{
  outline:3px solid var(--focus-ring);
  outline-offset:3px;
  border-radius:6px;
}
html[data-contrast="high"]{ --focus-ring:#000000; }

/* Available to assistive tech, never painted. Shared by the language switcher
   hint and anything else that needs text only screen readers should reach. */
.sr-only{
  position:absolute !important; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}