/* Hurghadastic, Design-Tokens.
   Festgeschrieben aus Entwurf A ("Klare Kueste"), gewaehlt am 2026-09-20.
   Ein Akzent, ein Radius-System, eine Schrift. Aenderungen nur hier, nie in Komponenten. */

:root {
  /* Farbe */
  --papier:        #FCFCFB;
  --sand:          #F4F1EC;
  --flaeche:       #FFFFFF;
  --tinte:         #0F2F3D;
  --tinte-60:      #55707C;
  --tinte-40:      #8AA0A9;
  --akzent:        #0E7C86;
  --akzent-dunkel: #0A5F67;
  --akzent-zart:   #E6F2F3;
  /* Schrift auf dem Akzent. Hell genug ist hier Weiss; im dunklen Modus wird
     der Akzent zu hellem Tuerkis, dort muss die Schrift dunkel werden. */
  --auf-akzent:    #FFFFFF;
  --linie:         #E3DFD8;
  --warnung:       #A4503C;
  /* WhatsApp-Gruen. Das urspruengliche #1F8A4C kam auf Papier nur auf
     4,27:1 und im dunklen Modus auf 3,66:1, beides zu wenig fuer 14 px
     halbfett. Dunkler hier, heller dort. */
  --gruen:         #1A7A42;

  /* Form */
  --r:    14px;
  --r-s:   8px;
  --r-pille: 999px;

  /* Raum */
  --mitte: 1180px;
  --mitte-schmal: 740px;
  --luft-s:  12px;
  --luft-m:  24px;
  --luft-l:  48px;
  --luft-xl: 80px;

  /* Schrift */
  --schrift: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-display: clamp(2rem, 4.6vw, 3.35rem);
  --t-h1:      clamp(1.75rem, 3.4vw, 2.5rem);
  --t-h2:      clamp(1.5rem, 2.6vw, 2rem);
  --t-h3:      1.125rem;
  --t-body:    1rem;
  --t-klein:   0.875rem;
  --t-winzig:  0.8125rem;

  /* Bewegung
     Die eingebauten CSS-Kurven sind zu weich. Diese hier startet schnell und
     laeuft sanft aus, dadurch wirkt jede Rueckmeldung sofort. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  /* Tiefe */
  /* Eigene Farbe, damit fest verdrahtete Schatten im dunklen Modus nicht
     als blauer Schimmer stehenbleiben. */
  --schatten-farbe: rgba(15,47,61,.09);
  --schatten:   0 1px 2px rgba(15,47,61,.05), 0 8px 24px rgba(15,47,61,.06);
  --schatten-s: 0 1px 2px rgba(15,47,61,.06);

  /* Ebenen */
  --z-kopf: 40;
  /* Der Schnellzugriff schwebt ueber dem Kopf, bleibt aber unter der
     Tableiste und dem Sprungverweis. */
  --z-schwebend: 45;
  --z-leiste: 50;
  --z-sprung: 100;
}

@media (prefers-color-scheme: dark) {
  :root {
    --papier:        #0C1B22;
    --sand:          #11242C;
    --flaeche:       #102229;
    --tinte:         #E8EEF0;
    --tinte-60:      #9DB2BA;
    --tinte-40:      #6C858F;
    --akzent:        #3FB3BD;
    --akzent-dunkel: #6ACBD3;
    /* Weiss auf #3FB3BD ergibt 2,5:1 und faellt durch. Dunkle Tinte darauf
     kommt auf ueber 8:1. */
    --auf-akzent:    #06222A;
    --akzent-zart:   #12333A;
    --linie:         #1D333C;
    --warnung:       #E0977F;
    --gruen:         #3FBF6A;
    --schatten-farbe: rgba(0,0,0,.4);
    --schatten:   0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.35);
    --schatten-s: 0 1px 2px rgba(0,0,0,.35);
  }
}