/* ------------------------------------------------------------------
   base.css – Schrift, Farbwerte, Grundgerüst
   Wird von index.php und login.php geladen.
------------------------------------------------------------------ */

/* Islington: Logo und Ordnernamen im Menü.
   font-display:swap – der Text ist sofort lesbar, die Schrift tauscht
   sich nach, sobald die Datei da ist. */
@font-face {
  font-family: "Islington";
  src: url("../fonts/Islington-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --fg: #111;
  --muted: #8a8a8a;
  --line: #d8d8d8;
  --active: #d21e1e;
  --bg: #fff;

  /* Hausfarbe für Trennlinien und Rahmen: 2px orange.
     --line bleibt das dezente Grau für Bildrahmen. */
  --rule: orange;
  --rule-w: 2px;

  /* nüchterne Schweizer Typografie; begrenzt für sehr breite/schmale Viewports */
  --base: clamp(13px, 1.3vw, 20px);

  /* Spaltenbreite des Rasters – vom Größenregler gesetzt */
  --cellw: 15rem;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: "Islington", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Islington läuft schmaler als die Grotesk: feste Größe und
     engere Laufweite, damit lange Ordnernamen ruhig stehen. */
  --display-size: 1.2rem;
  --display-track: -.5px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--base);
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
}

.empty { color: var(--muted); }
.empty.small { font-size: .82em; }