/* LHB Design-Tokens 1.0
   Zentrale visuelle Steuerung der Website. Die derzeitigen Werte bilden den
   bestaetigten Bestand ab; spaetere Redesigns sollen primaer hier erfolgen.
   Komponenten duerfen diese Tokens verwenden, aber nicht lokal neu definieren. */

:root {
  /* Typografie */
  --lhb-font-body: 'IBM Plex Sans', sans-serif;
  --lhb-font-display: 'Plus Jakarta Sans', sans-serif;
  --lhb-font-ui: var(--lhb-font-display);
  --lhb-font-heading: var(--lhb-font-display); /* Kompatibilitaetsalias */

  /* Typografische Rollen: globale Baseline, komponentenspezifische Displaygroessen bleiben erlaubt. */
  --lhb-type-kicker-size: 10px;
  --lhb-type-ui-size: 11px;
  --lhb-type-meta-size: 11px;
  --lhb-type-credit-size: 10px;
  --lhb-type-weight-strong: 800;
  --lhb-type-tracking-kicker: .13em;

  /* Grundfarben */
  --lhb-color-accent: #660099;
  --lhb-color-accent-light: #cc66ff;
  --lhb-color-ink: #111111;
  --lhb-color-paper: #ffffff;
  --lhb-color-line-muted: #999999;
  --lhb-color-text-secondary: #444444;
  --lhb-color-text-meta: #767676;
  --lhb-color-text-muted: var(--lhb-color-text-meta);

  /* Linien */
  --lhb-line-color: var(--lhb-color-ink);
  /* v347: alle sichtbaren Struktur-, Modul- und Medienkanten folgen einem
     einzigen Wert. --thin bleibt ausschliesslich fuer subtile Mikrotrenner. */
  --lhb-line-width: 2px;
  --lhb-line-width-thin: 1px;
  --lhb-line-width-medium: var(--lhb-line-width);
  --lhb-line-width-strong: 4px;

  /* Flaechen */
  --lhb-surface-page: var(--lhb-color-paper);
  --lhb-surface-panel: var(--lhb-color-paper);
  --lhb-surface-muted: #f3f3f3;
  /* Bewusste Startseiten-Sonderflächen; zentralisiert, damit keine Direktfarben verbleiben. */
  --lhb-surface-home-bubble-light: #fefefe;
  --lhb-surface-home-bubble-tint: #f8f5f9;

  /* Fokus */
  --lhb-focus-color: var(--lhb-color-accent);
  --lhb-focus-width: 3px;
  --lhb-focus-offset: 2px;

  /* Abstaende */
  --lhb-space-1: 6px;
  --lhb-space-2: 10px;
  --lhb-space-3: 16px;
  --lhb-space-4: 24px;
  --lhb-space-5: 32px;
  --lhb-space-6: 48px;

  /* v347: mehr Ruhe fuer Desktop-/Tablet-Module; Smartphone bleibt kompakt. */
  --lhb-module-pad-block-desktop: 48px;
  --lhb-module-pad-inline-desktop: 34px;
  --lhb-module-pad-block-tablet: 38px;
  --lhb-module-pad-inline-tablet: 28px;
  --lhb-media-pad-desktop: 36px;
  --lhb-media-pad-tablet: 30px;
  --lhb-contact-label-offset: 26px;

  /* Formelemente und Aktionen */
  --lhb-control-height: 48px;
  --lhb-action-height: 44px;
  --lhb-control-padding-inline: 14px;
  --lhb-mobile-header-height: 72px;

  /* Gemeinsame Hero-Geometrie fuer Titelgeschichten sowie SAJ-/KONNEX-Artikel. */
  --lhb-journal-hero-image-start: 30%;
  --lhb-journal-hero-panel-width: 38%;
  --lhb-journal-hero-text-width: 30%;
  --lhb-journal-hero-panel-bottom: 78.947%;
  --lhb-journal-hero-panel-clip: polygon(0 0, 100% 0, 78.947% 100%, 0 100%);
  --lhb-journal-hero-mobile-aspect: 3 / 2;


  /* Neutrale Farbskala: bestehende Werte zentral benannt, ohne visuelle Aenderung. */
  --lhb-neutral-950: #171717;
  --lhb-neutral-900: #222222;
  --lhb-neutral-850: #292929;
  --lhb-neutral-800: #2b2b2b;
  --lhb-neutral-750: #333333;
  --lhb-neutral-700: #444444;
  --lhb-neutral-650: #555555;
  --lhb-neutral-625: #666666;
  --lhb-neutral-600: #686868;
  --lhb-neutral-575: #6b6b6b;
  --lhb-neutral-500: #767676;
  --lhb-neutral-400: #999999;
  --lhb-neutral-350: #aaaaaa;
  --lhb-neutral-300: #c9c9c9;
  --lhb-neutral-275: #cccccc;
  --lhb-neutral-250: #d8d8d8;
  --lhb-neutral-225: #dddddd;
  --lhb-neutral-200: #e0e0e0;
  --lhb-neutral-150: #eeeeee;
  --lhb-neutral-125: #f0f0f0;
  --lhb-neutral-110: #f2f2f2;
  --lhb-neutral-100: #f3f3f3;
  --lhb-neutral-90: #f4f4f4;
  --lhb-neutral-80: #f5f5f5;
  --lhb-neutral-70: #f6f6f6;
  --lhb-neutral-60: #f7f7f7;
  --lhb-neutral-50: #fafafa;


  /* Akzentabstufungen und wiederkehrende akzentnahe Flaechen. */
  --lhb-color-accent-dark-1: #570088;
  --lhb-color-accent-dark-2: #4d0073;
  --lhb-color-accent-dark-3: #4a0077;
  --lhb-color-accent-dark-4: #3d0066;
  --lhb-color-accent-dark-5: #3a0060;
  --lhb-color-accent-deep: #3d1a5e;
  --lhb-surface-accent-1: #f9f4fd;
  --lhb-surface-accent-2: #f7f3fb;
  --lhb-surface-accent-3: #f7f5fa;
  --lhb-surface-accent-4: #f6f1fa;
  --lhb-surface-accent-5: #f5f3f7;
  --lhb-surface-accent-6: #f5f1fa;
  --lhb-surface-accent-7: #f2eef8;
  --lhb-surface-accent-8: #f1edf7;
  --lhb-surface-accent-9: #f0eef8;
  --lhb-surface-accent-10: #f0eaf8;
  --lhb-surface-accent-11: #f0e8f8;
  --lhb-surface-accent-12: #f0edf5;
  --lhb-surface-accent-13: #ede8f0;

  /* Globale Interaktionsrollen fuer grossflaechige Navigationsmodule. */
  --lhb-surface-navigation-hover: var(--lhb-surface-accent-11);
  /* Akzenttransparenzen leiten sich aus der einen Markenfarbe ab. Eine Änderung
     von --lhb-color-accent greift dadurch auch in Fokus-, Halo- und Hoverzustände durch. */
  --lhb-overlay-accent-035: color-mix(in srgb, var(--lhb-color-accent) 3.5%, transparent);
  --lhb-overlay-accent-045: color-mix(in srgb, var(--lhb-color-accent) 4.5%, transparent);
  --lhb-overlay-accent-soft: color-mix(in srgb, var(--lhb-color-accent) 7%, transparent);
  --lhb-overlay-accent-13: color-mix(in srgb, var(--lhb-color-accent) 13%, transparent);
  --lhb-overlay-accent-15: color-mix(in srgb, var(--lhb-color-accent) 15%, transparent);
  --lhb-overlay-accent-32: color-mix(in srgb, var(--lhb-color-accent) 32%, transparent);
  --lhb-overlay-accent-35: color-mix(in srgb, var(--lhb-color-accent) 35%, transparent);
  --lhb-overlay-accent-42: color-mix(in srgb, var(--lhb-color-accent) 42%, transparent);
  --lhb-overlay-accent-48: color-mix(in srgb, var(--lhb-color-accent) 48%, transparent);

  --lhb-color-state-error: #cc0000;
  --lhb-color-state-success: #146b34;
  --lhb-color-link-external: #003399;

  /* Weitere wiederkehrende neutrale Bestandswerte. */
  --lhb-neutral-975: #1a1a1a;
  --lhb-neutral-925: #1e1e1e;
  --lhb-neutral-875: #272727;
  --lhb-neutral-525: #777777;
  --lhb-neutral-325: #bbbbbb;
  --lhb-neutral-290: #c7c7c7;
  --lhb-neutral-265: #d2d2d2;
  --lhb-neutral-240: #d6d6d6;

  /* Wiederkehrende funktionale Farbrollen. */
  --lhb-color-text-strong: var(--lhb-neutral-900);
  --lhb-color-text-body: var(--lhb-neutral-800);
  --lhb-color-text-soft: var(--lhb-neutral-750);
  --lhb-color-border-soft: var(--lhb-neutral-275);
  --lhb-color-border-subtle: var(--lhb-neutral-200);
  --lhb-surface-subtle: var(--lhb-neutral-150);
  --lhb-surface-soft: var(--lhb-neutral-60);
  --lhb-surface-reader: var(--lhb-neutral-950);


  /* Spezialflaechen, die in wiederkehrenden Modulen vorkommen. */
  --lhb-surface-reader-paper: #fbfaf7;
  --lhb-surface-reader-edge-dark: #d8d0c5;
  --lhb-surface-reader-edge-light: #e8e1d8;
  --lhb-surface-placeholder: #f4f1f7;
  --lhb-surface-media-placeholder: #efefef;
  --lhb-surface-journal-dark: #1a0a2e;
  --lhb-color-highlight: #ffff00;
  --lhb-surface-story-1: #e0d8ea;
  --lhb-surface-story-2: #e8e0f0;
  --lhb-surface-story-3: #e8e4d8;
  --lhb-surface-story-4: #e8f0e4;
  --lhb-surface-story-5: #f0ece4;
  --lhb-surface-story-6: #e0e4ec;
  --lhb-surface-story-7: #e4ecf0;
  --lhb-color-story-icon: #c0b0d0;

  /* Transparenzen und Schatten. */
  --lhb-overlay-accent-deep-92: color-mix(in srgb, var(--lhb-color-accent-deep) 92%, transparent);
  --lhb-overlay-dark-96: rgba(10,10,10,.96);
  --lhb-overlay-dark-94: rgba(17,17,17,.94);
  --lhb-overlay-dark-92: rgba(17,17,17,.92);
  --lhb-overlay-dark-82: rgba(17,17,17,.82);
  --lhb-overlay-dark-65: rgba(17,17,17,.65);
  --lhb-overlay-dark-62: rgba(17,17,17,.62);
  --lhb-overlay-light-95: rgba(255,255,255,.95);
  --lhb-overlay-light-94: rgba(255,255,255,.94);
  --lhb-overlay-light-92: rgba(255,255,255,.92);
  --lhb-overlay-light-90: rgba(255,255,255,.90);
  --lhb-overlay-light-88: rgba(255,255,255,.88);
  --lhb-overlay-light-82: rgba(255,255,255,.82);
  --lhb-overlay-light-78: rgba(255,255,255,.78);
  --lhb-overlay-light-75: rgba(255,255,255,.75);
  --lhb-overlay-light-72: rgba(255,255,255,.72);
  --lhb-overlay-light-65: rgba(255,255,255,.65);
  --lhb-overlay-light-60: rgba(255,255,255,.60);
  --lhb-overlay-light-50: rgba(255,255,255,.50);
  --lhb-overlay-light-45: rgba(255,255,255,.45);
  --lhb-overlay-light-40: rgba(255,255,255,.40);
  --lhb-overlay-light-20: rgba(255,255,255,.20);
  --lhb-overlay-light-08: rgba(255,255,255,.08);
  --lhb-shadow-soft: 0 12px 24px rgba(0,0,0,.12);
  --lhb-shadow-panel: 0 10px 24px rgba(0,0,0,.18);

  /* v275 – zentrale Rastervertraege fuer Arbeitsfelder und deren Unterseiten.
     Die Werte beschreiben bewusste Seitenfamilien; lokale Seiten duerfen diese
     nur ueber dokumentierte Varianten ueberschreiben. */
  --lhb-grid-workfield-hero: minmax(0,1.05fr) minmax(360px,.95fr);
  --lhb-grid-subpage-hero: minmax(0,1.05fr) minmax(0,1.55fr);
  --lhb-grid-standard-split: minmax(280px,1.05fr) minmax(0,1.55fr);
  --lhb-grid-retrospective-split: minmax(220px,1fr) minmax(0,3fr);
  --lhb-grid-documentary-row: minmax(220px,.82fr) minmax(0,1.8fr);
  --lhb-grid-wide-media: minmax(280px,.72fr) minmax(0,1.88fr);
  --lhb-network-callout-min-height: 240px;

  /* Kompatibilitaets-Aliase fuer den vorhandenen Bestand.
     Diese Namen bleiben vorerst bestehen, zeigen aber auf die Token-Schicht. */
  --lila: var(--lhb-color-accent);
  --flieder: var(--lhb-color-accent-light);
  --schwarz: var(--lhb-color-ink);
  --weiss: var(--lhb-color-paper);
  --grau-linie: var(--lhb-color-line-muted);
  --text-neben: var(--lhb-color-text-secondary);
  --text-meta: var(--lhb-color-text-meta);
  --linie: var(--lhb-line-width);
}