/* Design tokens.
   Colours and typeface taken from the VG Altenkirchen-Flammersfeld website, so the tool
   reads as part of the same house: brand red #e30613, typeface Lato. */

/* ------------------------------------------------------------------- fonts */

/* Lato, self-hosted. It used to be *named* in --font and never loaded — the app fell back
   to Segoe UI on Windows, Roboto on Android and Liberation on Linux, i.e. it looked
   different on every device and like the VG on none. No CDN: a webfont from a third party
   would leak every visitor's IP, which is exactly what this app promises not to do. */
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('/fonts/lato-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Metric-matched fallback: Lato has a smaller x-height than Arial, so without this the
   layout visibly jumps when the real font swaps in. */
@font-face {
  font-family: 'Lato Fallback';
  src: local('Arial'), local('Helvetica');
  size-adjust: 97.5%;
  ascent-override: 101%;
  descent-override: 22%;
  line-gap-override: 0%;
}

:root {
  color-scheme: light;

  --font: 'Lato', 'Lato Fallback', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Lato ships 100/300/400/700/900 — there is NO 600. Asking for 600 makes the browser
     snap to 700, which would silently collapse the weight hierarchy onto one value.
     So only real weights exist here. */
  --fw-normal: 400;
  --fw-bold: 700;
  --fw-black: 900;   /* h1 and the brand only — this is the VG's signature weight */

  /* --- type scale (1.2 modular, 16px base) ------------------------------ */
  /* There were 21 hard-coded font sizes, four of them within 0.6px of each other. Spacing
     was tokenised, type was not — and type is what carries hierarchy. */
  --t-2xs: .6875rem;   /* 11px — chips, badges, counters */
  --t-xs: .8125rem;    /* 13px — hints, table headers, footer */
  --t-sm: .875rem;     /* 14px — muted text, labels, menus */
  --t-md: 1rem;        /* 16px — body, inputs, buttons, ANSWER BUTTONS */
  --t-lg: 1.125rem;    /* 18px — h3 / card titles */
  --t-xl: 1.375rem;    /* 22px — h2 */
  --t-2xl: clamp(1.625rem, 1.3rem + 1.4vw, 2rem);   /* h1 */

  --lh-tight: 1.2;
  --lh-snug: 1.35;
  --lh-body: 1.6;

  --ls-tight: -.015em;
  --ls-wide: .03em;

  --measure: 68ch;     /* reading width — a 1180px line is twice as long as anyone can read */

  /* --- brand ------------------------------------------------------------ */
  --vg-red: #e30613;
  --vg-red-dark: #b1050f;
  --vg-red-soft: #fdecee;
  --vg-red-ring: rgba(227, 6, 19, .18);

  /* Danger is NOT the brand colour: when "Löschen" and "Einladungen versenden" share a
     value, the colour has stopped saying anything. */
  --danger: #b3261e;
  --danger-dark: #8c1d18;
  --danger-soft: #fceeed;

  /* A muted institutional blue, so red is no longer the only colour that means
     "look here". Banners and identity notes are information, not alarm. */
  --info: #2b5a8a;
  --info-soft: #eef3f8;

  /* --- answers: never colour alone, every state also carries a glyph ----- */
  --yes: #2e7d32;
  --yes-soft: #e8f5e9;
  --maybe: #9a4d00;
  --maybe-soft: #fff3e0;
  --no: #565d68;
  --no-soft: #f3f4f6;

  /* --- neutrals: one ramp, one hue, slightly WARM ------------------------ */
  /* The old greys were cool/blueish under a warm, orange-leaning red — that mix is what
     makes an interface look assembled rather than composed, and faintly clinical. */
  --n-0: #ffffff;
  --n-25: #fdfcfc;
  --n-50: #f8f7f6;
  --n-100: #f3f1f0;
  --n-200: #e6e3e1;
  --n-300: #cfcbc8;   /* subtle divider, progress track */
  --n-400: #9d9894;   /* icon grey, placeholder */
  --n-500: #8a8580;   /* control outlines — 3.1:1 on white (WCAG 1.4.11) */
  --n-600: #6b6560;   /* muted text — 5.2:1 */
  --n-700: #4d4843;
  --n-900: #21201e;

  --bg: var(--n-100);
  --surface: var(--n-0);
  --surface-2: var(--n-50);
  --border: var(--n-200);
  --border-strong: var(--n-500);
  --text: var(--n-900);
  --text-muted: var(--n-600);

  /* --- elevation: four levels, and they mean different things ------------ */
  /* Everything used to share --shadow-sm: the topbar, panels, cards, even the primary
     button. When every surface floats equally, nothing is nested — it is just a pile of
     boxes. */
  --e0: none;                                         /* container in the flow: panel */
  --e1: 0 1px 2px rgba(33, 32, 30, .04),
        0 1px 3px rgba(33, 32, 30, .06);              /* object in a container: card */
  --e2: 0 2px 4px rgba(33, 32, 30, .04),
        0 4px 12px rgba(33, 32, 30, .08);             /* lifted: card:hover, toast */
  --e3: 0 8px 24px rgba(33, 32, 30, .12),
        0 2px 6px rgba(33, 32, 30, .06);              /* above everything: modal, menu */

  /* Kept as aliases so nothing breaks while the rest migrates. */
  --shadow-sm: var(--e1);
  --shadow: var(--e2);
  --shadow-lg: var(--e3);

  /* --- shape: radius scales with the surface ---------------------------- */
  --radius-sm: 6px;    /* controls */
  --radius: 10px;      /* containers */
  --radius-lg: 14px;   /* overlays */

  /* --- spacing ---------------------------------------------------------- */
  --s0: 2px;
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;

  /* --- motion ----------------------------------------------------------- */
  --ease: cubic-bezier(.2, .8, .3, 1);
  --fast: .14s var(--ease);
  --slow: .45s var(--ease);

  /* WCAG 2.2 SC 2.5.8 asks for 24px; Apple says 44, Material 48. Doodle's grid fails
     exactly here, so nothing you vote with goes below 44. */
  --tap: 44px;

  --page: 1180px;
}

/* Motion is decoration. Anyone who asked their system to stop it gets a static app, not a
   slower one. */
@media (prefers-reduced-motion: reduce) {
  :root { --fast: .01ms; --slow: .01ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}