/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — die einzige Farb-, Abstands- und Bewegungsquelle dieser Seite.
   Palette = Kunden-CI der BAS GmbH: Tinte #22233F (Farbe der Wortmarke) und
   BAS-Blau #3E94C4 (Akzent der Altseite). Kein Creme, kein Beige, kein Gold.
   Markenfarben stehen in BEIDEN Modi fest; nur die semantischen Tokens drehen.
   ══════════════════════════════════════════════════════════════════════════ */
:root{
  /* ── Markenfarben (modus-unabhaengig) ────────────────────────────────── */
  --tinte:        #22233F;   /* OKLCH 0.270 0.052 280.8 — Finanz/B2B-Sektor */
  --tinte-weich:  #3A3D5E;
  --blau:         #3E94C4;   /* OKLCH 0.635 0.109 236.6 */
  --blau-tief:    #1F5C8F;

  /* ── Semantik · hell (Standard) ──────────────────────────────────────── */
  --grund:        #FFFFFF;
  --grund-2:      #F4F6FA;   /* kuehles Blaugrau, kein warmes Papier */
  --flaeche:      #FFFFFF;
  --schrift:      #22233F;   /* 15,22:1 auf Weiss */
  --schrift-2:    #5C6478;   /*  5,92:1 auf Weiss */
  --rand:         #DDE3EC;
  --rand-stark:   #C3CCDA;
  --akzent:       #1F5C8F;   /*  7,03:1 auf Weiss */
  --akzent-flach: #E7F0F8;
  --icon-akzent:  #3E94C4;
  --focus:        #1F5C8F;
  --ns-accent:    #3E94C4;

  /* ── Abstaende (eigene Namen, kollidieren nicht mit Tailwind) ─────────── */
  --raum-xs:.5rem; --raum-sm:1rem; --raum-md:1.5rem;
  --raum-lg:2.5rem; --raum-xl:4rem; --raum-2xl:6rem;
  --radius-sm:.35rem; --radius:.7rem; --radius-lg:1.35rem;
  --schatten-sm:0 1px 2px rgb(34 35 63 / .07);
  --schatten:0 14px 40px rgb(34 35 63 / .11);
  --schatten-tief:0 26px 70px rgb(34 35 63 / .16);
  --breite:76rem;
  --zeile:34px;               /* Zeilenmass des Kontenblatts */

  /* ── Typografie ───────────────────────────────────────────────────────── */
  --text-small:.82rem;
  --text-body:1.0625rem;
  --text-lead:clamp(1.13rem,1.3vw,1.3rem);
  --text-h4:clamp(1.08rem,1.2vw,1.22rem);
  --text-h3:clamp(1.3rem,2vw,1.6rem);
  --text-h2:clamp(1.65rem,3.1vw,2.35rem);
  --text-h1:clamp(2rem,4.4vw,3.25rem);
  --lh-tight:1.08; --lh-snug:1.22; --lh-body:1.65;
  --tracking-tight:-.02em; --tracking-label:.1em;

  /* ── Bewegung (Werte aus REF-C, Tempo nach Auftrag halbiert) ──────────── */
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-mikro:.14s;
  --dur:.2s;
  --dur-ruhe:.32s;
  --weg-reveal:14px;
  --takt-raster:72s;          /* das Kontenblatt atmet */
  --takt-foto:60s;            /* das Hero-Foto atmet */
}

/* ── Semantik · dunkel ──────────────────────────────────────────────────── */
.dark{
  --grund:        #14162A;   /* tiefes Marineanthrazit, nie #000000 */
  --grund-2:      #1A1D31;
  --flaeche:      #1E2138;
  --schrift:      #E4E8EF;   /* 14,51:1 — nicht reinweiss */
  --schrift-2:    #A8B0C4;   /*  8,21:1 */
  --rand:         #2C3150;
  --rand-stark:   #3B4166;
  --akzent:       #7FB2DC;   /*  7,90:1 */
  --akzent-flach: #232744;
  --icon-akzent:  #7FB2DC;
  --focus:        #7FB2DC;
  --ns-accent:    #7FB2DC;
  --schatten-sm:0 1px 2px rgb(0 0 0 / .40);
  --schatten:0 14px 40px rgb(0 0 0 / .45);
  --schatten-tief:0 26px 70px rgb(0 0 0 / .55);
}