/* ================================================================
   MORISI Digital — Design-Tokens
   Einzige Quelle für Farbe, Schrift, Abstand und Bewegung.
   Wird von Website, Markenblatt und späteren Anwendungen geteilt.
   ================================================================ */
:root{

  /* ---- Helle Flächen (warmes Greige, bewusst nicht gelbstichig) ---- */
  --paper:      #F1EDE8;   /* helle Grundfläche */
  --paper-2:    #FAF8F5;   /* hellere Fläche, Karten */
  --surface:    #E6DFD6;   /* ruhige Füllung, Hover */
  --line:       #D7CEC3;   /* Linien, Trenner */

  /* ---- Text auf hellen Flächen ---- */
  --ink:        #1D1A18;   /* Haupttext            — 14,9:1 auf paper */
  --ink-soft:   #69605A;   /* Nebentext            —  5,3:1 auf paper */
  --ink-faint:  #726960;   /* Meta, Platzhalter    —  4,6:1 auf paper */

  /* ---- Schiefer: Akzent und dunkle Flächen ---- */
  --slate-100:  #E8EEF2;   /* Akzentfläche hell / Text auf dunkel — 12,6:1 auf slate-900 */
  --slate-300:  #9DB4C2;   /* Nebentext auf dunkel —  6,8:1 auf slate-900 */
  --slate-350:  #8FA8B6;   /* Meta auf dunkel      —  5,9:1 auf slate-900, 4,7:1 auf slate-800 */
  --slate-400:  #5A8098;   /* nur Verläufe und Hover — NICHT für Text (3,5:1) */
  --slate:      #33556B;   /* Primärakzent */
  --slate-800:  #223B4B;   /* dunkle Fläche */
  --slate-900:  #182A36;   /* tiefste Fläche, Footer */

  /* ---- Linien auf dunklen Flächen ---- */
  --line-dark:  rgba(232,238,242,.16);

  /* ---- Browserrahmen der Musterentwürfe ----
     Diese Töne stehen absichtlich als eigene Werte da und nicht als Rolle:
     der Rahmen muss sich gegen den Abschnitt absetzen, auf dem er liegt
     (--slate-800). Gemessen gegen genau diesen Grund:
       --chrome           2,00:1  — Leiste, liegt zwischen Grund und heller Demoseite
       --frame-line       3,39:1  — Rahmenkante, erfüllt die 3:1 für Bedienelemente
       --frame-line-hover 5,43:1  — beim Überfahren
     Vorher war die Leiste --slate-800 auf --slate-800, also 1,00:1: unsichtbar. */
  --chrome:            #46697F;
  --frame-line:        #6A8FA4;
  --frame-line-hover:  #9DB4C2;

  /* ---- Schrift ---- */
  --font-display: 'Familjen Grotesk', system-ui, -apple-system, sans-serif;
  --font-body:    'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  /* ---- Schriftgrößen ---- */
  --step-hero:  clamp(44px, 6.6vw, 86px);
  --step-h2:    clamp(32px, 4.2vw, 56px);
  --step-h3:    clamp(21px, 2vw, 26px);
  --step-lead:  clamp(17px, 1.6vw, 20px);
  --step-body:  16.5px;
  --step-small: 14.5px;
  --step-meta:  12.5px;

  /* ---- Abstände ---- */
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-24: 96px;
  --section-pad: clamp(88px, 11vw, 152px);

  /* ---- Maße ---- */
  --content:  1440px;
  --gutter:   clamp(20px, 4vw, 60px);
  --radius:   7px;
  --radius-lg: 14px;

  /* ---- Bewegung ---- */
  --ease:        cubic-bezier(.2,.75,.25,1);
  --dur-fast:    240ms;
  --dur-mid:     560ms;
  --dur-build:   1050ms;
  --stagger:     140ms;
  --idle-cycle:  12s;
  --tilt-max:    13deg;
}

/* ================================================================
   Invertierter Abschnitt — dunkle Schieferfläche.
   Auf einen Container legen; Text- und Linienrollen kippen mit.
   ================================================================ */
.invert{
  background: var(--slate-900);
  --paper:     var(--slate-900);
  --paper-2:   var(--slate-800);
  --surface:   var(--slate-800);
  --line:      var(--line-dark);
  --ink:       var(--slate-100);
  --ink-soft:  var(--slate-300);
  --ink-faint: var(--slate-350);
  color: var(--ink);
}
.invert--mid{
  background: var(--slate-800);
  --paper:   var(--slate-800);
  --paper-2: var(--slate-900);
}