/* ══════════════════════════════════════════════════════════════════════════
   PWGermanShop — TOKEN-BASIS (Core, Priority 10)
   ──────────────────────────────────────────────────────────────────────────
   Definiert ALLE Design-Tokens, gegen die das Fachmodul-CSS (Priority 50)
   programmiert ist: Katalog, Warenkorb, Kasse, Kundenkonto, Versand,
   Widerruf, Newsletter.

   WARUM IM CORE UND NICHT IM THEME
   Themes sind austauschbar und optional — die Token-Basis ist es nicht. Lagen
   die Tokens (wie früher) im Beispiel-Theme, brach jede Installation ohne
   dieses Theme: Fachmodul-Markup rendert dann mit undefinierten Custom-
   Properties, also ohne Farben, Rahmen, Radien und Schatten. Genau das machte
   das Beispiel-Theme faktisch zur Pflicht und verhinderte eigenständige
   Premium-Themes.

   VERTRAG FÜR THEME-BAUER
   Ein Theme ÜBERSCHREIBT diese Tokens (Priority 100) — es liefert sie nicht.
   Es genügt, in :root die Tokens neu zu setzen, die anders aussehen sollen;
   alle übrigen behalten die neutralen Werte von hier. Ein Theme muss also
   NIE die vollständige Liste pflegen.

   Zwei Familien, beide in Gebrauch:
     --gs-*    ältere Familie, vom Fachmodul-CSS am häufigsten genutzt
     --paper / --ink / --accent / --step-* … neuere, feiner aufgelöste Familie
   Sie werden hier konsistent aufeinander abgebildet.

   Rein Tokens — bewusst KEIN Reset und KEIN Komponenten-Styling, damit ein
   Theme freie Hand über Layout und Anmutung behält.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Flächen und Tinte ──────────────────────────────────────────────── */
    --gs-bg:            #f3f4f6;
    --gs-surface:       #ffffff;
    --gs-surface-alt:   #f9fafb;
    --gs-card-bg:       #ffffff;
    --gs-code-bg:       #f4f4f5;
    --gs-ink:           #1f2937;
    --gs-ink-soft:      #6b7280;
    --gs-ink-mute:      #9ca3af;
    --gs-ink-muted:     #6b7280;   /* Alias zu -soft; von Accounts genutzt */
    --gs-muted:         #6b7280;   /* Alias zu -soft; von Catalog/Accounts genutzt */

    /* ── Linien ─────────────────────────────────────────────────────────── */
    --gs-border:        #e5e7eb;
    --gs-border-strong: #d1d5db;

    /* ── Akzent ─────────────────────────────────────────────────────────── */
    --gs-accent:        #334155;
    --gs-accent-deep:   #1e293b;
    --gs-accent-soft:   #eef2f7;
    --gs-accent-line:   #cbd5e1;
    /* Schrift AUF dem Akzent. Eigener Token, weil ein Theme den Akzent aufhellen
       kann (z. B. Terrakotta): Fest kodiertes Weiß fiel dort unter AA (2,96:1).
       Default passt zu Cores dunklem Schiefer-Akzent. */
    --gs-accent-ink:    #ffffff;

    /* ── Status ─────────────────────────────────────────────────────────── */
    --gs-ok:            #15803d;
    --gs-ok-bg:         #f0fdf4;
    --gs-ok-border:     #bbf7d0;
    --gs-warn:          #b45309;
    --gs-warn-bg:       #fffbeb;
    --gs-warn-border:   #fde68a;
    --gs-err:           #b91c1c;
    --gs-err-bg:        #fef2f2;
    --gs-err-border:    #fecaca;
    /* Info: neutraler Hinweis ohne Handlungsbedarf (Produkt-Hinweistexte). */
    --gs-info:          #18415f;
    --gs-info-bg:       #eaf3fb;
    --gs-info-border:   #b8d4ea;
    --gs-sale:          #b91c1c;   /* Angebotspreis-Auszeichnung */

    /* ── Form ───────────────────────────────────────────────────────────── */
    --gs-radius:        8px;
    --gs-radius-sm:     6px;
    --gs-radius-pill:   999px;
    --gs-shadow-sm:     0 1px 2px rgba(17, 24, 39, 0.06);
    --gs-shadow:        0 8px 28px rgba(17, 24, 39, 0.10);

    /* ── Typografie ─────────────────────────────────────────────────────── */
    --gs-font-sans:     system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --gs-font-display:  var(--gs-font-sans);

    /* ── Maße ───────────────────────────────────────────────────────────── */
    --gs-maxw:          1140px;
    --gs-gutter:        1.5rem;
    --gs-bp-sm:         36rem;
    --gs-bp-md:         48rem;
    --gs-bp-lg:         64rem;

    /* ══ Neuere Familie ═══════════════════════════════════════════════════
       Feiner aufgelöst und auf die --gs-*-Werte abgebildet, damit beide
       Familien nie auseinanderlaufen. */
    --paper:        var(--gs-bg);
    --surface:      var(--gs-surface);
    --surface-2:    var(--gs-surface-alt);
    --ink:          var(--gs-ink);
    --ink-2:        var(--gs-ink-soft);
    --ink-3:        var(--gs-ink-mute);
    --line:         var(--gs-border);
    --line-2:       var(--gs-border-strong);
    --accent:       var(--gs-accent);
    --accent-2:     var(--gs-accent-deep);
    --accent-wash:  var(--gs-accent-soft);

    --ok:    var(--gs-ok);    --ok-bg:   var(--gs-ok-bg);
    --warn:  var(--gs-warn);  --warn-bg: var(--gs-warn-bg);
    --err:   var(--gs-err);   --err-bg:  var(--gs-err-bg);

    /* Primärknopf — Themes überschreiben meist nur diese zwei. */
    --btn-bg: var(--gs-accent);
    --btn-fg: #ffffff;

    --font-sans:    var(--gs-font-sans);
    --font-display: var(--gs-font-display);

    /* Fluid-Typo-Skala (clamp: min → viewport → max) */
    --step--1: clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem);
    --step-0:  clamp(0.95rem, 0.92rem + 0.20vw, 1.05rem);
    --step-1:  clamp(1.10rem, 1.04rem + 0.30vw, 1.28rem);
    --step-2:  clamp(1.32rem, 1.20rem + 0.60vw, 1.70rem);
    --step-3:  clamp(1.60rem, 1.38rem + 1.10vw, 2.30rem);
    --step-4:  clamp(1.95rem, 1.55rem + 2.00vw, 3.10rem);

    /* Abstands-Skala */
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;

    --maxw:   var(--gs-maxw);
    --gutter: var(--gs-gutter);
    --r:      var(--gs-radius);
    --r-img:  var(--gs-radius);
    --shadow: var(--gs-shadow);

    /* Motion — Themes dürfen verlangsamen/abschalten. */
    --dur:  160ms;
    --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
}

/* Bewegungsempfindliche Nutzer: Dauer global auf 0, damit jede Transition,
   die --dur benutzt, still steht — ohne dass jedes Modul daran denken muss. */
@media (prefers-reduced-motion: reduce) {
    :root { --dur: 0ms; }
}

/* ══════════════════════════════════════════════════════════════════════════
   FUNKTIONALE HILFSKLASSEN
   ──────────────────────────────────────────────────────────────────────────
   Nur was das Fachmodul-Markup zum FUNKTIONIEREN braucht — kein Styling, das
   ein Theme betrifft. Ein Theme darf das hier überschreiben, muss aber nicht.
   ══════════════════════════════════════════════════════════════════════════ */

/**
 * Nur für Screenreader. KEINE Stilfrage, sondern Barrierefreiheit:
 * Fachmodule geben damit Beschriftungen aus, die ein Formularfeld erklären,
 * ohne die Oberfläche zu überfrachten (z. B. „Menge für <Produkt>").
 *
 * Lag diese Klasse — wie früher — nur im Theme, wurde aus einer fehlenden
 * Definition sofort sichtbarer Fließtext mitten im Warenkorb. Darum gehört sie
 * hierher, wo sie garantiert vorhanden ist.
 *
 * `clip-path` statt des alten `clip`, plus Restbreite/-höhe, damit der Text
 * für Screenreader auffindbar bleibt.
 */
.gs-visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip-path: inset(50%);
}