/* Die Merkmale der Produktfamilie — gemeinsam für alle .earth-Karten.

   Hier steht, was auf ALLEN drei Seiten gleich ist: die neutrale Grundlage,
   die Radien, die Schatten, der Abstandsrhythmus und die Schriftgrößen.
   Was eine Marke ausmacht — ihre Farbe und ihre Schrift — steht NICHT hier,
   sondern in `static/thema.css` jeder Seite.

   Drei Ebenen, in dieser Reihenfolge geladen:

     erde-tokens.css   was alle teilen        (diese Datei)
     grundstil.css     wie die Seite gebaut ist
     thema.css         wie diese Marke aussieht

   Der Grundstil greift NUR über Rollen zu (`var(--tinte)`, `var(--flaeche)`,
   `var(--r-karte)`), nie über eine Marken- oder Neutralfarbe direkt. Jedes
   Thema bindet die Rollen an seine Werte. Deshalb färbt ein Austausch des
   Merkmalssatzes die ganze Seite um, ohne dass eine Regel angefasst wird.

   Diese Datei wird aus erde.gemein abgeglichen. Ändern in
   erde.gemein/quellen/erde-tokens.css, danach dort
   `python abgleich.py --schreiben`. */

:root {
  /* --- Neutrale Grundlage ------------------------------------------------
     Ein sehr heller, leicht kühler Grund. Er trägt Karten und Fotos, ohne
     sich vorzudrängen — Inhalt zuerst, Marke als Orientierung. */
  --earth-bg: #F8FAFB;
  --earth-surface: #FFFFFF;
  --earth-surface-soft: #F3F6F7;
  --earth-text: #17212B;
  --earth-text-muted: #64717D;
  --earth-border: #E3E9ED;
  --earth-border-strong: #CBD5DC;

  /* --- Schatten ----------------------------------------------------------
     Zwei Stufen, beide zurückhaltend. Eine Karte liegt auf dem Grund, sie
     schwebt nicht darüber. */
  --shadow-sm: 0 4px 16px rgba(20, 40, 55, .06);
  --shadow-md: 0 10px 30px rgba(20, 40, 55, .09);
  --shadow-lg: 0 8px 30px rgba(20, 40, 55, .08);

  /* --- Radien ------------------------------------------------------------
     Eine Reihe, keine Mischung. Wer einen Wert braucht, der hier nicht
     steht, braucht in Wahrheit einen anderen Radius. */
  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-xl: 32px;
  --radius-voll: 999px;

  /* --- Abstände ----------------------------------------------------------
     Der 4er-Rhythmus. `--ab-*` gibt es seit dem ersten Abgleich, die
     Langnamen kommen dazu, weil sie sich in Regeln besser lesen. */
  --ab-1: 4px;
  --ab-2: 8px;
  --ab-3: 12px;
  --ab-4: 16px;
  --ab-5: 24px;
  --ab-6: 32px;
  --ab-7: 48px;
  --ab-8: 64px;
  --ab-9: 80px;
  --ab-10: 96px;

  /* --- Schriftgrößen -----------------------------------------------------
     Display und H1 wachsen mit der Breite, alles andere steht fest. Der
     Fließtext ist auf dem Handy 16px und auf dem Schreibtisch 17px — kleiner
     wird er nie, sonst ist die Karte auf dem Handy nicht mehr lesbar. */
  --t-display: clamp(2.2rem, 1.4rem + 3.4vw, 3.5rem);
  --t-h1: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  --t-h2: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --t-h3: clamp(1.15rem, 1.05rem + .5vw, 1.4rem);
  --t-body: clamp(1rem, .97rem + .12vw, 1.0625rem);
  --t-klein: .9375rem;
  --t-meta: .8125rem;

  --zeilen-text: 1.62;
  --zeilen-eng: 1.2;
  --sperrung-display: -.035em;
  --sperrung-kopf: -.02em;

  /* --- Maße --------------------------------------------------------------
     `--breit` begrenzt den Inhalt, `--lesebreite` den Fließtext. Eine Zeile
     mit 120 Zeichen liest niemand gern zu Ende. */
  --breit: 1280px;
  --lesebreite: 70ch;
  --kopf: 64px;

  /* --- Knopfmaße ---------------------------------------------------------
     Auf allen drei Seiten gleich groß, damit ein „Karte"-Knopf überall
     dieselbe Fläche hat. Die Höhe erfüllt die 44px-Mindestgröße für den
     Finger. */
  --knopf-y: .72em;
  --knopf-x: 1.15em;
  --knopf-y-klein: .44em;
  --knopf-x-klein: .85em;

  /* --- Bewegung ----------------------------------------------------------
     Kurz und unauffällig. Alles, was länger als eine Fünftelsekunde
     dauert, wird beim zweiten Mal als Verzögerung empfunden. */
  --zeit-schnell: 150ms;
  --zeit: 180ms;
  --kurve: cubic-bezier(.2, .6, .3, 1);
}

/* Wer das nicht sehen will, bekommt es nicht zu sehen. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --zeit-schnell: 1ms;
    --zeit: 1ms;
  }
}