/* =====================================================================
   EMERIA · VDIV-Verwaltertage 2026 — Design Tokens
   ---------------------------------------------------------------------
   Eine Stelle für Farbe, Typografie, Rhythmus und Bewegung.
   Die Blautöne stammen aus der Emeria-Marke (#06187d) und aus dem
   bestehenden Produktprototyp (Aktionsblau #2440ff, Papier #f5f7fc) —
   die Microsite baut darum eine dunklere, cineastische Bühne.
   ===================================================================== */

:root {
  /* --- Marke ------------------------------------------------------ */
  --emeria:        #06187d;   /* Emeria-Blau, aus dem Logo entnommen   */
  --emeria-lift:   #1b2fa8;   /* aufgehellt, für Flächen auf Dunkel    */
  --action:        #2440ff;   /* Aktionsblau aus dem Prototyp          */
  --action-soft:   #6f86ff;

  /* --- Bühne ------------------------------------------------------ */
  --stage:         #04061c;
  --stage-2:       #070b26;
  --stage-3:       #0b1136;
  --paper:         #f5f7fc;   /* Produktflächen, aus dem Prototyp      */
  --paper-line:    #e3e7f2;

  /* --- Schrift ---------------------------------------------------- */
  --fg:            #eef1fb;
  --fg-2:          rgba(238, 241, 251, .66);
  --fg-3:          rgba(238, 241, 251, .40);
  --fg-4:          rgba(238, 241, 251, .22);
  --ink:           #0c1440;   /* Text auf hellen Produktflächen        */

  /* --- Linien & Flächen ------------------------------------------- */
  --line:          rgba(150, 175, 255, .16);
  --line-soft:     rgba(150, 175, 255, .09);
  --line-strong:   rgba(150, 175, 255, .34);
  --surface:       rgba(255, 255, 255, .035);
  --surface-2:     rgba(255, 255, 255, .06);

  /* --- Semantik (aus dem Produkt übernommen) ---------------------- */
  --ki:            #a58bff;   /* KI — im Prototyp violett             */
  --ki-dim:        rgba(165, 139, 255, .16);
  --ok:            #34d399;
  --warn:          #fbbf24;
  --crit:          #f87171;
  --teal:          #2dd4bf;

  /* --- Partner ---------------------------------------------------- */
  --reneo:         #46e167;
  --leadbeyond:    #ffc912;

  /* --- Reifegrad-Marker ------------------------------------------- */
  --mat-proto:     #34d399;
  --mat-build:     #6f86ff;
  --mat-next:      #fbbf24;
  --mat-vision:    #a58bff;

  /* --- Typografie ------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
          Roboto, Arial, "Noto Sans", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
          "Liberation Mono", monospace;

  --t-display: clamp(38px, 6.9vw, 116px);
  --t-h1:      clamp(30px, 4.4vw, 72px);
  --t-h2:      clamp(21px, 2.5vw, 40px);
  --t-h3:      clamp(17px, 1.7vw, 26px);
  --t-lead:    clamp(15px, 1.32vw, 21px);
  --t-body:    clamp(13px, 1.02vw, 16px);
  --t-small:   clamp(11px, .84vw, 13px);
  --t-kicker:  clamp(10px, .74vw, 12.5px);

  --track-display: -.038em;
  --track-h1:      -.03em;
  --track-kicker:  .2em;

  /* --- Raster & Rhythmus ------------------------------------------ */
  --pad-x:  clamp(28px, 6vw, 128px);
  --pad-y:  clamp(28px, 5vh, 84px);
  --maxw:   1680px;
  --r-sm:   6px;
  --r:      10px;
  --r-lg:   16px;
  --r-xl:   22px;

  /* --- Bewegung --------------------------------------------------- */
  --ease:      cubic-bezier(.16, 1, .3, 1);
  --ease-in:   cubic-bezier(.7, 0, .84, 0);
  --dur-fast:  260ms;
  --dur:       620ms;
  --dur-slow:  1000ms;
  --stagger:   90ms;

  --shadow-lift: 0 30px 90px rgba(0, 0, 0, .55);
  --shadow-ui:   0 24px 70px rgba(2, 4, 16, .6),
                 0 2px 0 rgba(255, 255, 255, .06) inset;
}

/* Helle Produktflächen erben denselben Wortschatz, nur invertiert. */
.on-paper {
  --fg:   var(--ink);
  --fg-2: #4a5570;
  --fg-3: #8e97b3;
  --line: var(--paper-line);
}