/* ═══════════════════════════════════════════════════════════════════════
   Jarušica — Designtokens
   Quelle: Tome Juraga, prijedlog_b_design-homepage, 14.09.2026

   Jeder Wert hier wurde aus Tomes gerenderter Seite per getComputedStyle
   ausgelesen — keiner ist nachempfunden. Die Zahl in Klammern ist, wie oft
   die Farbe auf seiner Seite vorkommt; sie sagt, wie tragend der Ton ist.

   DIESE DATEI IST DIE EINZIGE QUELLE FÜR FARBE, SCHRIFT UND MASS.
   Wer in Website, Webshop oder JARA einen Hex-Wert direkt hinschreibt,
   hat das System verlassen. Drei Produkte, ein Tokensatz.

   Kontrastwerte nach WCAG 2.2 (relative Luminanz, sRGB-linearisiert),
   nachrechenbar mit kontrast.py in diesem Ordner.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Blau-Achse ─────────────────────────────────────────────────────
     Eine einzige Achse von fast schwarz bis fast weiß. Genau darum wirkt
     Tomes Entwurf ruhig — es gibt keinen zweiten Akzent. */
  --jr-navy-deep:   #002647;  /* Footer, Balkentitel            (24×) */
  --jr-navy:        #003366;  /* Überschriften, Logo, Warenkorb (69×) */
  --jr-sky:         #0073BB;  /* Akzent, CTA, Eyebrow           (73×) */
  --jr-ink:         #15324B;  /* Fließtext — häufigste Farbe   (228×) */

  /* ── Gedämpfte Töne ───────────────────────────────────────────────── */
  --jr-muted:       #62798D;  /* Sekundärtext        4.53:1 auf Weiß  */
  --jr-muted-2:     #536D81;  /* gedämpfter Text     5.42:1           */
  --jr-muted-3:     #51748E;  /* Hilfstext           4.95:1           */

  /* ACHTUNG: Tomes Original für Hilfstext war #8FAABF und erreicht auf
     Weiß nur 2.42:1 — als Text unlesbar. --jr-muted-3 ist derselbe Ton,
     abgedunkelt bis zur Schwelle: Farbton 206.2° → 205.6°, Sättigung
     unverändert 27 %, nur die Helligkeit fällt von 65 % auf 44 %.
     Der Originalton bleibt hier NUR für Flächen und dekorative Symbole,
     auf denen kein Text steht. Niemals für Schrift benutzen. */
  --jr-muted-3-alt: #8FAABF;

  /* ── Flächen und Linien ───────────────────────────────────────────── */
  --jr-mist:        #F0F4FF;  /* Abschnittsfläche               (15×) */
  --jr-panel:       #F4F8FB;  /* Balkenfläche                         */
  --jr-paper:       #FFFFFF;
  --jr-line:        #D8E4EF;  /* dekorative Trennlinie   1.29:1 (75×) */
  --jr-line-soft:   #E8EFF7;  /* weiche Trennlinie              (10×) */
  --jr-pill-line:   #B9CCDC;  /* Pillenrahmen                   (14×) */

  /* Bedienelement-Rand. WCAG 1.4.11 verlangt 3:1, wo der Rahmen die
     EINZIGE Anzeige eines Bedienelements ist — also bei Eingabefeldern.
     --jr-line schafft nur 1.29:1 und bleibt für Dekoratives. */
  --jr-line-strong: #6C99C3;  /* 3.01:1 */

  /* ── Zustand ──────────────────────────────────────────────────────── */
  --jr-stock:       #0F6B3F;  /* „na zalihi"  6.57:1            (21×) */

  /* Diese vier fehlen in Tomes Entwurf vollständig. Sie sind nicht aus
     einer Standardpalette genommen, sondern auf Blaustich gezogen und
     gegen Weiß gemessen, damit sie neben dem Blau nicht fremdeln. */
  --jr-error:       #A3231C;  /* 7.46:1  nicht lieferbar, Fehler      */
  --jr-error-bg:    #FDF2F1;
  --jr-warn:        #8A5200;  /* 6.39:1  Restbestand, Lieferverzug    */
  --jr-warn-bg:     #FFF6E8;
  --jr-info:        #0073BB;  /* = sky                                */
  --jr-info-bg:     #F0F4FF;
  --jr-neutral:     #536D81;  /* 5.42:1  ausgelaufen, archiviert      */

  /* Fokusring — sichtbar auf hellem UND dunklem Grund. Ohne ihn ist die
     Seite per Tastatur unbedienbar, und das ist kein Randfall: jede
     Screenreader-Nutzung läuft darüber. */
  --jr-focus:       #9ECBEA;

  /* ── Schrift ──────────────────────────────────────────────────────── */
  --jr-font-display: Montserrat, Inter, system-ui, sans-serif;
  --jr-font-body:    Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --jr-font-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Montserrat trägt alles, was strukturiert; Inter alles, was gelesen
     oder bedient wird. Beide auf Google Fonts, lizenzfrei (SIL OFL). */
  --jr-size-hero:    36px;  --jr-lh-hero:    39.6px;  /* 700 */
  --jr-size-hero-lg: 38px;  --jr-lh-hero-lg: 41.8px;  /* 700 */
  --jr-size-sect:    24px;  --jr-lh-sect:    32px;    /* 700 */
  --jr-size-sect-lg: 32px;  --jr-lh-sect-lg: 35.2px;  /* 700 */
  --jr-size-bar:     18px;  --jr-lh-bar:     21.6px;  /* 700 */
  --jr-size-card:    14px;  --jr-lh-card:    17.5px;  /* 700 */
  --jr-size-mini:    13px;  --jr-lh-mini:    16.25px; /* 600 */
  --jr-size-price:   20px;  --jr-lh-price:   28px;    /* 700 */
  --jr-size-body:    14px;  --jr-lh-body:    20px;    /* 400 */
  --jr-size-small:   12px;  --jr-lh-small:   16px;    /* 400 */
  --jr-size-label:   11px;  --jr-lh-label:   16.5px;  /* 700, +1.32px */
  --jr-ls-label:     1.32px;
  --jr-ls-thead:     1.1px;

  /* Tomes Entwurf geht bis 9 px hinunter („s PDV-om"). Das ist auf einem
     Telefon und für ältere Augen nicht mehr lesbar, und Lesbarkeit ist im
     Shop eine Umsatzfrage. Die Skala endet deshalb bei 11 px. Das ist die
     EINZIGE bewusste Abweichung von seinem Entwurf. */
  --jr-size-micro:   11px;  --jr-lh-micro:   15px;

  /* ── Maß ──────────────────────────────────────────────────────────── */
  --jr-r-sm:   4px;
  --jr-r-md:   6px;
  --jr-r-lg:   8px;
  --jr-r-xl:  11px;
  --jr-r-pill: 9999px;
  --jr-gutter: 40px;   /* Seitenrand der Abschnitte im Entwurf */

  /* Tomes Inhaltsbreite. Gemessen an der rechten Kante von hero-lagoon
     und skladiste: beide enden bei 1440. */
  --jr-content: 1440px;
}