/* ============================================================================
   Design-Tokens — KOPIE aus @slappp/design
   Quelle: git.cloudron.dzh.hamburg/marge.pai/slappp-design @ 7332d6c
   Uebernommen: 2026-08-20 · zusammengesetzt aus src/core/primitives.css
   und src/brands/optadata.css (der Tailwind-Block src/theme.css entfaellt,
   diese App hat bewusst keine Build-Kette).

   EINE ANPASSUNG BEIM KOPIEREN, bewusst und geprueft: der Markenselektor
   [data-brand="optadata"] wird zu :root,[data-brand="optadata"] erweitert.
   Grund: diese App IST eine opta-data-Anwendung, sie hat keine zweite Marke.
   Ohne die Erweiterung waere jede Rolle undefiniert, sobald das Attribut am
   <html> fehlt - im Browser gemessen: transparente Flaechen, Schrift faellt
   auf Times zurueck, die Oberflaeche ist unlesbar. Der Dunkelmodus-Block
   bleibt attributgebunden, damit er nicht ungewollt greift.

   NICHT VON HAND AENDERN. Aenderungen gehoeren ins Design-System;
   Drift meldet: node bin/tokens-abgleich.mjs
   ============================================================================ */

/* ============================================================================
   @slappp/design — Kern-Primitive (markenunabhängig)

   Diese Datei enthält NICHTS Markenspezifisches. Abstände, Radien, Schriftgrade,
   Zeilenhöhen, Schatten-Formeln und Bewegung sind über alle Marken identisch —
   sie sind die Grammatik, die Marke ist das Vokabular.

   Wer hier eine Farbe einträgt, hat die Schichtung verletzt: Farben leben
   ausschließlich in src/brands/*.css.
   ============================================================================ */

:root {
  /* ---- Abstandsraster (4px-Basis) ------------------------------------- */
  --space-0:   0;
  --space-1:   0.25rem;  /*  4px */
  --space-2:   0.5rem;   /*  8px */
  --space-3:   0.75rem;  /* 12px */
  --space-4:   1rem;     /* 16px */
  --space-5:   1.5rem;   /* 24px */
  --space-6:   2rem;     /* 32px */
  --space-7:   3rem;     /* 48px */
  --space-8:   4rem;     /* 64px */

  /* ---- Radien ---------------------------------------------------------- */
  /* 4px ist von slappp.de gemessen (.nav-link border-radius: 4px) und damit
     die bestehende SLAPPP-Handschrift — nicht geraten. */
  --radius-sm:   2px;
  --radius-md:   4px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  /* NEU: eine Stufe über xl, für Karten und den Anwendungsrahmen. Ab hier
     wird der Radius selbst zur Aussage statt nur eine Kante zu entschärfen. */
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* ---- Schriftgrade ---------------------------------------------------- */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;   /* slappp.de .nav-link */
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.5rem;     /* slappp.de .company-name */
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;
  /* NEU: Displaygrad. Eine Kennzahl ist die eigentliche Aussage einer
     Fachanwendung — sie darf größer sein als die Überschrift darüber. */
  --text-4xl:  3.25rem;

  /* ---- Zeilenhöhe & Laufweite ------------------------------------------ */
  --leading-tight:  1.25;
  --leading-normal: 1.6;    /* slappp.de body line-height */
  --leading-flush:  1.05;   /* NEU: Displayzeilen, mehrzeilige Überschriften */
  --tracking-tight: -0.3px; /* slappp.de .company-name letter-spacing */
  /* NEU: -0.3px ist bei 2rem+ zu wenig — dort reißt der Satz auf. */
  --tracking-tighter: -1.2px;
  --tracking-wide:   1px;   /* slappp.de .tagline letter-spacing */
  --tracking-wider:  1.6px; /* NEU: Versalien in Kleinstgraden */

  /* ---- Schriftgewichte -------------------------------------------------- */
  --weight-light:    300;
  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Bewegung --------------------------------------------------------- */
  --motion-fast:   0.15s;
  --motion-normal: 0.3s;   /* slappp.de transition-Standard */
  --motion-slow:   0.6s;
  /* GEÄNDERT: "ease" ist die Voreinstellung des Browsers, nicht eine
     Entscheidung. Diese Kurve bremst am Ende — Zustandswechsel wirken dadurch
     entschieden statt weich. Wer das alte Verhalten braucht, überschreibt
     --ease-standard lokal; die Rolle bleibt dieselbe. */
  --ease-standard: cubic-bezier(.2, .8, .2, 1);

  /* ---- Schatten-Deckkraft (die FARBE kommt aus der Marke) --------------- */
  --shadow-alpha-soft:   0.05;  /* slappp.de --shadow */
  --shadow-alpha-medium: 0.10;
  --shadow-alpha-strong: 0.18;

  /* ---- Versatzschatten ohne Weichzeichnung ------------------------------ */
  /* NEU. Bewusst als VOLLSTÄNDIGES Offset-Tripel, nicht als drei Einzelwerte:
     so lautet die Verwendung

         box-shadow: var(--shadow-hard) var(--color-contour);

     und beginnt mit var( — das Gate erkennt sie damit als tokenkonform, ohne
     dass bin/check-tokens.mjs angepasst werden muss. Drei Einzeltokens hätten
     genau die Ausnahme provoziert, die dieses Paket vermeiden will.

     Warum überhaupt hart statt weich: der Versatzschatten ist druckbar, er
     flimmert auf schlechten Panels nicht, er bleibt bei nicht-ganzzahligen
     Zoomstufen stabil — und er ist wiedererkennbar, was ein weicher
     Material-Schatten per Definition nicht ist. */
  --shadow-hard-sm: 2px 2px 0;
  --shadow-hard:    4px 4px 0;
  --shadow-hard-lg: 6px 6px 0;

  /* ---- Rahmenstärken ---------------------------------------------------- */
  --border-thin:  1px;
  --border-thick: 2px;
  /* NEU: die Kontur. Bei SLAPPP ist die harte schwarze Logo-Kontur das
     prägendste Merkmal der Marke — bis hierher trug Struktur aber eine graue
     1px-Hilflinie, also der Default jedes Admin-Baukastens. */
  --border-heavy:  3px;

  /* ---- Layout ----------------------------------------------------------- */
  --content-max:  72rem;
  --reading-max:  42rem;
  --sidebar-width: 16rem;   /* NEU: war in galerie.css ein Rohwert */
  --breakpoint-app: 60rem;  /* NEU: die Umbruchstelle, an einer Stelle */
}

/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-fast:   0s;
    --motion-normal: 0s;
    --motion-slow:   0s;
  }
}

/* ============================================================================
   Marke: opta data  —  data-brand="optadata"

   ⚠️  FREMDE MARKE MIT VERBINDLICHEM STYLEGUIDE.
   Eine falsche Farbe ist hier kein Geschmacksfehler, sondern ein CD-Verstoß
   gegenüber dem Konzern. Deshalb sind die Primärwerte per Test festgenagelt
   (test/marken.test.mjs) — sie dürfen nicht "verschönert" werden.

   HERKUNFT: „Styleguide für die opta data Gruppe und die opta data Angebotsmarke",
   Status 20.08.2024, 101 Seiten. Vault:
   00_Vorlagen/opta data Corporate Design/opta data Gruppe_CD-Guide.pdf

   BEKANNTE FALLE: Es kursiert eine zweite, abweichende Palette (Dunkeltürkis
   als 2F6D7F), abgeleitet aus einer Master-PPTX für die Präsentations-Erzeugung.
   Sie ist NICHT maßgeblich. Maßgeblich ist ausschließlich die Tabelle unten.

   ERGÄNZUNG 2026-08-19: Die neuen Rollen (Kontur, Inversfläche, weiche
   Zustandsflächen) sind hier AUSSCHLIESSLICH aus den Styleguide-Primär- und
   Sekundärfarben abgeleitet. Kein neuer Farbton, kein Schwarz in der
   Grundgestaltung, Berry bleibt unangetastet auf --color-danger.
   ============================================================================ */

:root,
[data-brand="optadata"] {
  /* ---- Primärfarben — unveränderlich laut Styleguide ------------------- */
  --od-dunkeltuerkis: #006986;  /* Pantone 315 C · CMYK 100-0-17-44 · RGB 0-105-134 */
  --od-tuerkis:       #77C5B8;  /* Pantone 570 C · CMYK 56-0-34-0  · RGB 119-197-184 */

  /* ---- Sekundärfarben — grafische Elemente, Flächen, Infokästen -------- */
  --od-gruen-gelb:    #A0C341;  /* CMYK 46-0-87-0 · RGB 160-195-65  */
  --od-gruen:         #6BBA82;  /* CMYK 62-0-61-0 · RGB 107-186-130 */
  --od-hellblau:      #50B1D1;  /* CMYK 65-11-13-0 · RGB 80-177-209 */
  --od-violettblau:   #7391C8;  /* CMYK 60-39-0-0 · RGB 115-145-200 */
  --od-cool-grey:     #4A4A49;  /* Cool Grey 11C · RGB 74-74-73 — für Schrift */

  /* ---- Warnfarbe -------------------------------------------------------- */
  /* ⚠️  „opta data Berry" ist laut Styleguide NUR für Warnhinweise und
     AUSDRÜCKLICH NICHT Bestandteil der Grundgestaltung. Wer diesen Wert auf
     --color-accent oder --color-brand legt, verstößt gegen das CD. */
  --od-berry:         #CE234E;  /* CMYK 13-96-55-3 · RGB 206-35-78 */

  --od-weiss:         #FFFFFF;
  --od-grau-50:       #F7FAFA;
  --od-grau-100:      #EDF3F3;
  --od-grau-300:      #C8D4D6;
  --od-grau-600:      #6B7B7E;
  --od-schwarz:       #1A1A1A;  /* Styleguide erlaubt Schwarz fuer Text "je nach Kontrast" */

  /* Abgeleitet 2026-08-19 aus den Styleguide-Werten oben, keine neuen Töne:
     die weichen Varianten sind je 12 % auf --od-weiss, die tiefe Kontur ist
     Dunkeltürkis 30 % abgedunkelt. */
  --od-dunkeltuerkis-tief:  #00475C;
  --od-dunkeltuerkis-weich: #E1EEF2;
  --od-dunkeltuerkis-fill:  #0A7A99;  /* Fläche AUF Dunkeltürkis */
  --od-dunkeltuerkis-linie: #3C93AB;  /* Linie auf Dunkeltürkis */
  --od-tuerkis-weich:       #E4F4F1;
  --od-tuerkis-matt:        #D3E6EB;  /* Sekundärtext auf Dunkeltürkis, 4.84:1 */
  --od-hellblau-weich:      #E2F1F7;
  --od-gruen-weich:         #E8F5EC;
  --od-gruen-gelb-weich:    #F1F6E1;
  --od-berry-weich:         #FAE4E9;
  /* Eigener Textton. BEGRÜNDUNG, weil das eine Korrektur ist: bis 2026-08-19
     lag --color-text-muted auf --od-grau-300 (#C8D4D6) — identisch mit
     --color-border und mit 1.66:1 auf Weiß als TEXTROLLE unbrauchbar. Der
     Fund kommt aus der Galerie („diesen Monat", Zeitstempel), nicht aus einem
     Geschmacksurteil. Dieser Ton trägt 3.01:1 und ist für Nicht-Fließtext
     (Zeitstempel, Fußnoten) tragfähig. Ein Test hält das jetzt fest. */
  --od-grau-450:            #85979A;

  /* ---- Schrift ---------------------------------------------------------- */
  /* Primärschrift ist Poppins (Google Fonts, kostenfrei, keine Lizenz nötig).
     Sie MUSS selbst gehostet werden — eine Einbindung über fonts.googleapis.com
     überträgt die IP-Adresse jedes Besuchers in die USA und ist in
     Deutschland abgemahnt worden. Ablage erwartet unter fonts/poppins-*.woff2
     der App; fehlt sie, greift die Ersatzkette und die Seite bleibt benutzbar. */
  --font-sans: 'Poppins', system-ui, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  /* Die Displayrolle ist bei opta data ebenfalls Poppins. Hier wird KEINE
     zweite Schrift eingeführt — das wäre ein CD-Verstoß. Die Rolle existiert
     trotzdem, sonst bricht sie beim Markenwechsel. */
  --font-display: 'Poppins', system-ui, Arial, sans-serif;

  /* ---- Semantische Zuweisung ------------------------------------------- */
  --color-bg-base:      var(--od-weiss);
  --color-bg-surface:   var(--od-grau-50);
  --color-bg-raised:    var(--od-weiss);
  --color-bg-sunken:    var(--od-grau-100);

  /* Headlines in Dunkeltürkis, Fließtext in Cool Grey — beides laut Styleguide.
     Gemessen: Dunkeltürkis 6.24:1 auf Weiß, Cool Grey 8.87:1. Beide AA-sicher. */
  --color-text-primary:   var(--od-cool-grey);
  --color-text-heading:   var(--od-dunkeltuerkis);
  --color-text-secondary: var(--od-grau-600);
  --color-text-muted:     var(--od-grau-450);
  --color-text-inverted:  var(--od-weiss);

  --color-border:        var(--od-grau-300);
  --color-border-strong: var(--od-grau-600);

  /* NEU: Kontur. NICHT Schwarz — der Styleguide führt kein Schwarz in der
     Grundgestaltung, nur "für Text je nach Kontrast". Die Kontur ist deshalb
     ein tiefes Dunkeltürkis, also der Primärton, nicht eine neue Farbe. */
  --color-contour:          var(--od-dunkeltuerkis-tief);

  /* NEU: Inversfläche = Dunkeltürkis. Der Styleguide führt Dunkeltürkis
     ausdrücklich als Flächenfarbe — dies ist die CD-konforme Kopfzeile. */
  --color-surface-inverse:  var(--od-dunkeltuerkis);
  --color-on-inverse:       var(--od-weiss);
  --color-on-inverse-muted: var(--od-tuerkis-matt);
  --color-inverse-fill:     var(--od-dunkeltuerkis-fill);
  --color-inverse-line:     var(--od-dunkeltuerkis-linie);

  --color-accent:        var(--od-dunkeltuerkis);
  --color-accent-hover:  #005570;
  --color-accent-text:   var(--od-weiss);

  /* Türkis trägt auf Weiß nur 2.01:1 — Fläche, niemals Text.
     Und auf der Türkisfläche reicht Cool Grey NICHT: gemessen 4.42:1, also unter
     AA. Der Styleguide erlaubt für Text ausdrücklich "Weiß/Grau/Schwarz je nach
     Kontrast" — hier ist Schwarz die CD-konforme und messbar tragfähige Wahl
     (9.16:1). Gefunden vom Kontrasttest, nicht im Browser. */
  --color-brand:         var(--od-tuerkis);
  --color-brand-on:      var(--od-schwarz);
  --color-brand-alt:     var(--od-hellblau);
  --color-brand-alt-on:  var(--od-weiss);

  --color-success:      var(--od-gruen);
  --color-warning:      var(--od-gruen-gelb);
  --color-danger:       var(--od-berry);   /* die einzige zulässige Berry-Rolle */
  --color-danger-on:    var(--od-weiss);

  /* NEU: getönte Zustandsflächen, alle aus den Werten oben. */
  --color-accent-soft:    var(--od-dunkeltuerkis-weich);
  --color-brand-soft:     var(--od-tuerkis-weich);
  --color-brand-alt-soft: var(--od-hellblau-weich);
  --color-success-soft:   var(--od-gruen-weich);
  --color-warning-soft:   var(--od-gruen-gelb-weich);
  --color-danger-soft:    var(--od-berry-weich);

  --color-focus:        var(--od-dunkeltuerkis);
  --shadow-color:       0, 105, 134;       /* Schatten im Markenton statt neutral */
}

[data-brand="optadata"][data-theme="dark"] {
  --color-bg-base:      #0B1F26;
  --color-bg-surface:   #112C35;
  --color-bg-raised:    #163741;
  --color-bg-sunken:    #071820;

  --color-text-primary:   #E4EFF1;
  --color-text-heading:   var(--od-tuerkis);
  --color-text-secondary: #A9C3C8;
  --color-text-muted:     #6E8A90;
  --color-text-inverted:  #0B1F26;

  --color-border:        #1E4753;
  --color-border-strong: #2F6675;

  --color-contour:          #04141A;
  --color-surface-inverse:  #04141A;
  --color-on-inverse:       var(--od-weiss);
  --color-on-inverse-muted: #8FB2BA;
  --color-inverse-fill:     #12303B;
  --color-inverse-line:     #235663;

  --color-accent:        var(--od-tuerkis);  /* 9.93:1 auf dunkel — hier trägt es */
  --color-accent-hover:  #98D6CB;
  --color-accent-text:   #0B1F26;

  --color-brand:         var(--od-dunkeltuerkis);
  --color-brand-on:      var(--od-weiss);

  /* Berry trägt auf #0B1F26 nur 4.05:1 — unter AA. Aufgehellt, aber weiterhin
     Berry-Familie und weiterhin ausschließlich auf --color-danger. */
  --color-danger:        #E8657F;
  --color-danger-on:     #04141A;

  --color-accent-soft:    #123037;
  --color-brand-soft:     #12343A;
  --color-brand-alt-soft: #12303B;
  --color-success-soft:   #122F22;
  --color-warning-soft:   #252F13;
  --color-danger-soft:    #33161F;

  --shadow-color:        0, 0, 0;
}