/* ============================================================
   jobin-tokens.css — Projekt-Design-Tokens (Farben ZENTRAL!)
   ------------------------------------------------------------
   Single source of truth für alle Farben/Flächen der Website, die
   nicht schon im zentralen Design-System (link.azerus.de:
   core → tokens → base-Skin → jobin-Skin) definiert sind.

   Warum lokal? Das DS wird cross-origin geladen; lokal wäre es erst
   nach einem DS-Deploy sichtbar. Diese Datei erlaubt schnelles,
   konsistentes Iterieren. Stabil gewordene Tokens später ins DS
   (_shared/brands/jobin/css/theme.css) promoten.

   Cascade: geladen NACH dem DS, VOR jobin.css (siehe Base.astro).
   REGEL: In den .astro/.css-Dateien keine rohen Hex/rgba mehr —
   immer diese Tokens (oder die DS-Tokens) verwenden.
   ============================================================ */
:root {
  /* Hoehe der Leiste. Sie steht als EIGENER Wert da, weil der Hero-Rahmen
     dieselbe Zahl braucht: nur wenn beide gleich sind, endet der Rahmen
     genau dort, wo das Untermenue beginnt — sonst blitzt ein Streifen Bild
     zwischen Rahmenkante und Panel durch. */
  --jb-nav-h: 60px;

  /* ---------- Marken-Kernfarben (lesbare Aliase auf die DS-Tokens) ---------- */
  --jb-green:  var(--color-primary);    /* #5acea7 — Signatur-Grün */
  --jb-orange: var(--color-secondary);  /* #ff8123 — Signatur-Orange */

  /* ---------- Text auf dunklem Ink ---------- */
  --jb-on-ink:       #ffffff;   /* Headlines/Buttons auf Ink */
  --jb-on-ink-dim:   #d7dee2;   /* Lead/Fließtext auf Ink */
  --jb-on-ink-muted: #aebac2;   /* sekundär: Steps, Footer */

  /* ---------- Hairlines & Konturen auf Ink (typografische Deko) ---------- */
  --jb-on-ink-line:       rgba(255, 255, 255, .10);  /* Trennlinien/Borders */
  --jb-on-ink-stroke:     rgba(255, 255, 255, .22);  /* text-stroke Deko */
  --jb-on-ink-stroke-max: rgba(255, 255, 255, .42);  /* text-stroke Hover */
  --jb-on-ink-fill-weak:  rgba(255, 255, 255, .12);  /* Chips/Buttons-Fläche auf Ink */

  /* ---------- Signatur-Glows (Hero/CTA-Blobs) ---------- */
  --jb-glow-orange: rgba(255, 129, 35, .26);
  --jb-glow-green:  rgba(90, 206, 167, .24);

  /* ---------- Flächen & Formen (Vorlage grb.uk.com) ----------
     Die Seite steht auf einem leicht getönten Grund, weiße Karten heben sich
     davon ab. Signatur-Form ist die EINE stark gerundete Ecke — sie macht
     Kacheln, Bilder und Bänder auf den ersten Blick wiedererkennbar. */
  --jb-page:            #f2f4f3;
  /* Ein vertikaler Rhythmus fuer die ganze Seite: jede Sektion traegt ihn
     oben UND unten, aufeinanderfolgende Sektionen lassen ihr oberes Polster
     weg (sonst stehen zwischen zwei Bloecken zwei Abstaende). */
  --jb-section-y:       clamp(6rem, 10vw, 10rem);

  /* ---------- Typo-Skala ----------
     Acht Stufen fuer die ganze Seite. Vorher standen 22 verschiedene Groessen
     nebeneinander, teils nur 2px auseinander — das liest sich unruhig, ohne
     dass man den Grund benennen kann. Jede Stufe hat eine klare Aufgabe:
       display  Hero
       xl       Statement, Abschluss
       l        Sektions- und Kartenueberschriften
       m        Unterueberschriften, Fragen, Jobtitel
       body-l   Fliesstext in Bloecken
       body     Standardtext, Buttons, Listen
       small    Meta, Rollen, Beitexte
       label    Kicker, Chips, Band (uppercase) */
  --jb-fs-display: clamp(3.75rem, 9vw, 7rem);
  --jb-fs-xl:      clamp(3rem, 6.5vw, 5rem);
  --jb-fs-l:       clamp(2.7rem, 5.4vw, 4.4rem);
  --jb-fs-m:       clamp(1.35rem, 1.9vw, 1.75rem);
  --jb-fs-body-l:  1.1875rem;
  --jb-fs-body:    1.0625rem;
  --jb-fs-small:   0.9375rem;
  --jb-fs-label:   0.8125rem;
  /* Duotone-Ton fuer die Hero-Buehne (Vorlage: kraeftiges Markenblau). */
  --jb-petrol:          #10333f;
  /* ---------- Formensprache ----------
     EIN gleichmaessiger Radius auf allen vier Ecken, dazu volle Pillen fuer
     Handlungen (Buttons, Chips, Suchfeld, Jobi). Die EINE stark gerundete
     Ecke ist die Handschrift von akko — jobin rundet gleichmaessig und
     weicher. Beim Hover strafft sich die Form: 22 → 8px, eine Richtung fuer
     alles, was anfassbar ist. */
  --jb-radius-card:      22px;
  --jb-corner-hover:     8px;
  --jb-hover-dur:        .5s;
  --jb-hover-ease:       cubic-bezier(.22, .7, .2, 1);

  /* ---------- Raster ----------
     Eine Inhaltsspalte für die ganze Seite. `--jb-content` ist die ÄUSSERE
     Breite (inkl. Seitenpolster), `--jb-content-inner` die reine Textspalte —
     Container, die ihr Polster außen tragen (Hero, Abschluss-Band, die
     randlosen Türen), brauchen die innere, sonst stehen sie 24px daneben. */
  --jb-content:       1160px;
  --jb-content-inner: calc(1160px - 2 * var(--space-5));

  /* ---------- Header / Nav ---------- */
  --jb-nav-bg:        var(--jb-ink);                    /* dunkler Header */
  --jb-nav-border:    rgba(255, 255, 255, .08);
  --jb-nav-shadow:    0 10px 30px -18px rgba(0, 0, 0, .8);
}

/* Ab 900px steht das Logo groesser und die Leiste wird hoeher. */
@media (min-width: 900px) {
  :root { --jb-nav-h: 74px; }
}