/* The design tokens of wir-in-ungarn.hu for the member pages (index.html, schedule.html) and the admin page.
   Source: DESIGN.md of the WIU repo (2.1.0): §Colors, §Typography, §Layout, §Shapes, §Components, §Elevation.
   DESIGN.md is the authority: change a value there first, then here. Page CSS uses only these variables. */
:root {
  /* §Colors */
  --wiu-green: #4a7c59;
  --wiu-green-light: #ecf2ee;
  --wiu-red: #c41e3a;
  --wiu-red-light: #faeaed; /* Pale Red */
  --wiu-offblack: #56646f;
  --wiu-ink: #2c3e50;
  --wiu-grey-700: #333333;
  --wiu-grey-500: #666666;
  --wiu-muted: #95a5a6;
  --wiu-surface: #ffffff;
  --wiu-border: #e0e0e0;
  --wiu-line-soft: #eeeeee;
  --wiu-fill: #f5f5f5;
  --wiu-video: #000000; /* not in DESIGN.md: the black video area of the call page (Markus) */

  /* §Typography: one face, Roboto */
  --wiu-font: "Roboto", "Roboto Fallback", system-ui, sans-serif;
  --wiu-text-title: 1.4rem;
  --wiu-text-headline: 1.8rem;
  --wiu-text-body: 1rem;
  --wiu-text-label: 0.875rem;
  --wiu-text-small: 0.75rem;
  --wiu-leading-body: 1.6;
  --wiu-leading-title: 1.3;
  --wiu-leading-label: 1.2;
  --wiu-tracking-label: 0.03em;

  /* §Layout rhythm */
  --wiu-space-xs: 0.25rem;
  --wiu-space-sm: 0.5rem;
  --wiu-space-md: 1rem;
  --wiu-space-lg: 1.5rem;
  --wiu-space-xl: 2.5rem;
  --wiu-touch: 2.75rem; /* 44px, the minimum touch target */

  /* §Shapes */
  --wiu-radius-sm: 4px;
  --wiu-radius-md: 8px;
  --wiu-radius-lg: 12px;
  --wiu-radius-surface: 16px; /* the content surface (the modal frame) */
  --wiu-radius-full: 9999px;
  --wiu-frame: 4px; /* the green frame of a content surface: its elevation, not a shadow */

  /* §Elevation: the tiled ground sits behind all page content; toasts float above everything */
  --wiu-z-behind: -1;
  --wiu-z-toast: 4000;
  --wiu-shadow-tile: 0 0.125rem 0.5rem rgb(0 0 0 / 0.15); /* Tile lift: the one shadow of a floating toast */
}

/* Roboto, self-hosted (src/app/fonts/roboto/ of the WIU repo, SIL OFL 1.1, see fonts/roboto/OFL.txt).
   One variable file per subset carries every weight; latin-ext has the Hungarian ő and ű.
   No third-party request: the same privacy rule as the WIU site. */
@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto/latin-ext.woff2") format("woff2");
  font-weight: 300 900;
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Roboto";
  src: url("/fonts/roboto/latin.woff2") format("woff2");
  font-weight: 300 900;
  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;
}
/* The metric fallback of the WIU site (fonts.css), so the swap does not move the text. */
@font-face {
  font-family: "Roboto Fallback";
  src: local("Arial");
  ascent-override: 92.98%;
  descent-override: 24.47%;
  line-gap-override: 0%;
  size-adjust: 99.78%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* An opaque white surface on the tiled paper ground (§Overview, §Elevation). */
body {
  margin: 0;
  font-family: var(--wiu-font);
  font-size: var(--wiu-text-body);
  line-height: var(--wiu-leading-body);
  color: var(--wiu-offblack);
  background-color: var(--wiu-fill); /* under the tiles while the image loads */
}

/* The tiled paper ground of the WIU site (globals.css, Feature 015), the image copied from public/assets/.
   WHY a fixed layer and not background-attachment: fixed: iOS Safari ignores that, so the tiles scrolled with the
   content; this layer stays put. inset: 0, not height: 100vh: no jump when the iOS URL bar moves. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--wiu-z-behind);
  background-image: url("/assets/pattern-bg.jpg");
  background-position: center top;
  background-repeat: repeat;
  pointer-events: none;
}

.wiu-surface {
  background: var(--wiu-surface);
  border: var(--wiu-frame) solid var(--wiu-green);
  border-radius: var(--wiu-radius-surface);
}

/* §Components › Buttons: primary. Hover goes ghost, never darker. */
.wiu-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: var(--wiu-touch);
  padding: 0.7em 1.6em;
  font-family: inherit;
  font-size: var(--wiu-text-label);
  font-weight: 700;
  line-height: var(--wiu-leading-label);
  letter-spacing: var(--wiu-tracking-label);
  text-transform: uppercase;
  color: var(--wiu-surface);
  background: var(--wiu-green);
  border: 2px solid var(--wiu-green);
  border-radius: var(--wiu-radius-lg);
  cursor: pointer;
}
.wiu-btn:hover:not(:disabled) {
  color: var(--wiu-green);
  background: var(--wiu-green-light);
}
/* Disabled Grey fill and border (DESIGN.md). The text is Dark Grey, not white: white on #95a5a6 is 2.6:1. */
.wiu-btn:disabled {
  color: var(--wiu-grey-700);
  background: var(--wiu-muted);
  border-color: var(--wiu-muted);
  cursor: not-allowed;
}

/* §Components › Inputs: 2px border, 8px radius, ink text. */
.wiu-select {
  min-height: var(--wiu-touch);
  padding: 0 0.9em;
  font-family: inherit;
  font-size: var(--wiu-text-label);
  color: var(--wiu-ink);
  background: var(--wiu-surface);
  border: 2px solid var(--wiu-border);
  border-radius: var(--wiu-radius-md);
  cursor: pointer;
}
.wiu-select:focus-visible {
  border-color: var(--wiu-green);
}

/* Focus is always the green ring, never browser blue (§Do's). */
:focus-visible {
  outline: 2px solid var(--wiu-green);
  outline-offset: 2px;
}

::selection {
  color: var(--wiu-surface);
  background: var(--wiu-green);
}

@media (prefers-reduced-motion: no-preference) {
  .wiu-btn,
  .wiu-select {
    transition:
      background-color 0.2s ease,
      color 0.2s ease,
      border-color 0.2s ease;
  }
}