/* ==========================================================================
   the u:lab, Design Tokens
   Quelle: "the ulab Brand Guidlines-5.pdf" (09/2025) und Website-Briefing 1.0
   Diese Datei ist die einzige Stelle, an der Farben, Grade und Abstaende
   definiert werden. Alles andere greift nur noch auf diese Namen zu.
   ========================================================================== */

:root {

  /* --- Farben (CD-Palette, unveraendert) ------------------------------- */
  --pink:        #F69ABB;
  --tomato:      #EA492B;
  --emerald:     #117F49;
  --sky:         #63C2E3;
  --royal:       #0431AE;
  --sand:        #EEE5D4;
  --weiss:       #FFFFFF;
  --schwarz:     #000000;

  /* Sand in zwei Tiefen fuer Flaechentrennung ohne neue Farbe */
  --sand-tief:   #E4D8C1;

  /* --- Rollen ---------------------------------------------------------- */
  --grund:       var(--sand);      /* die Buehne, ca. 70 Prozent */
  --text:        var(--schwarz);
  --interaktion: var(--tomato);    /* ausschliesslich: Links, CTAs, Punkte */

  /* --- Proven Pairs (CD Seite 7) ---------------------------------------
     Jeweils: Flaeche -> Typo / Akzent. Nie zwei laute Farben im
     selben Viewport. Ratio 70/30, bei drei Farben 60/30/10.
     --------------------------------------------------------------------- */
  --pair-royal-bg:    var(--royal);   --pair-royal-fg:    var(--sand);
  --pair-royal-akz:   var(--pink);
  --pair-pink-bg:     var(--pink);    --pair-pink-fg:     var(--royal);
  --pair-sand-bg:     var(--sand);    --pair-sand-fg:     var(--schwarz);
  --pair-sand-akz:    var(--tomato);
  --pair-tomato-bg:   var(--tomato);  --pair-tomato-fg:   var(--sand);
  --pair-emerald-bg:  var(--emerald); --pair-emerald-fg:  var(--weiss);
  --pair-emerald-akz: var(--pink);
  --pair-sky-bg:      var(--sky);     --pair-sky-fg:      var(--schwarz);
  --pair-schwarz-bg:  var(--schwarz); --pair-schwarz-fg:  var(--sand);

  /* --- Schrift ---------------------------------------------------------
     Abril Fatface ist ausschliesslich fuer Namen reserviert:
     die Wortmarke und Signatur-Titel. Nie fuer Headlines oder Fliesstext.
     --------------------------------------------------------------------- */
  --font-namen:  "Abril Fatface", Georgia, serif;
  --font:        "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
                 Helvetica, Arial, sans-serif;

  --gewicht-normal:   400;
  --gewicht-halbfett: 600;
  --gewicht-fett:     800;

  /* Typo-Skala: extreme Groessenkontraste als Luxus-Hebel.
     clamp() heisst: waechst mit der Fensterbreite, bleibt in den Grenzen. */
  --grad-mega:   clamp(3.5rem, 11vw, 10.5rem);   /* Hero, ein Wort */
  --grad-xxl:    clamp(2.75rem, 7vw, 6rem);      /* Sektions-Headline */
  --grad-xl:     clamp(2rem, 4.4vw, 3.5rem);     /* Unter-Headline */
  --grad-l:      clamp(1.375rem, 2.2vw, 1.875rem);
  --grad-m:      1.125rem;                       /* Fliesstext */
  --grad-s:      0.9375rem;
  --grad-mini:   0.75rem;                        /* Versalien-Label */

  --zeilen-eng:  0.98;   /* grosse Grade */
  --zeilen-mid:  1.25;
  --zeilen-text: 1.65;   /* Fliesstext, angenehm lesbar */

  --track-versal: 0.14em;  /* leichtes Tracking bei Versalien, CD-Regel */
  --track-mega:  -0.035em; /* optisches Kerning bei grossen Graden */

  --mass: 34rem;  /* komfortable Zeilenlaenge fuer Fliesstext */

  /* --- Raum -------------------------------------------------------------
     Verschwendeter Raum ist ein Luxus-Prinzip. Grosszuegig bleiben.
     --------------------------------------------------------------------- */
  --r-1:  0.5rem;
  --r-2:  1rem;
  --r-3:  1.5rem;
  --r-4:  2.5rem;
  --r-5:  4rem;
  --r-6:  6rem;
  --r-7:  9rem;
  --sektion: clamp(5rem, 11vw, 11rem);  /* vertikaler Sektions-Atem */
  --rand:    clamp(1.5rem, 5vw, 5.5rem); /* Seitenrand */
  --bahn:    88rem;                      /* maximale Inhaltsbreite */

  /* --- Kanten -----------------------------------------------------------
     Flache Flaechen, praezise Kanten. Keine Verlaeufe, Schatten,
     Transparenzen. Radien sparsam und konsistent.
     --------------------------------------------------------------------- */
  --radius-0:    0;
  --radius-knopf: 999px;
  --haarlinie:   1px;

  /* --- Bewegung ---------------------------------------------------------
     Langsam und weich, nie huepfend. Immer mit reduced-motion-Fallback.
     --------------------------------------------------------------------- */
  --zeit-kurz:  300ms;
  --zeit-mid:   450ms;
  --zeit-lang:  600ms;
  --kurve:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --atem-zyklus: 6s;   /* der atmende Punkt: ruhige Atmung */
}