/* ============================================================
   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.
   ============================================================ */

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

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

/* 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;
  --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; }
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(--accent-strong);
  outline-offset:3px;
  border-radius:6px;
}
html[data-contrast="high"] :where(a,button,[role="switch"],input,select,summary):focus-visible{ outline-color:#000; }

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