/* =====================================================================
   Backwaren-Bildershop: Design-Tokens
   ---------------------------------------------------------------------
   Schicht 1  --ba-ref-*  Rohwerte. Nur hier (und in theme-*.css) stehen
                          Hex-/rgb-Farbwerte.
   Schicht 2  --ba-*      Bedeutung. Komponenten (app.css, Templates)
                          verwenden AUSSCHLIESSLICH diese Schicht.
   Themes                 überschreiben nur Schicht 2, z. B. theme-portal.css.

   Breakpoints (in Media Queries sind keine Variablen möglich, daher fest):
     sm   700px  Galerie 3 Spalten, Filter nebeneinander
     md   860px  zweispaltige Layouts, große Überschriften, Leiste einzeilig
     lg  1000px  Galerie 4 Spalten
   ===================================================================== */

:root {
  /* ---------- Schicht 1: Rohwerte ---------- */
  --ba-ref-lichttisch: #ECEEEC;
  --ba-ref-papier: #FFFFFF;
  --ba-ref-tinte: #1C2126;
  --ba-ref-schiefer: #56606A;
  --ba-ref-schiefer-dunkel: #3A4148;
  --ba-ref-kiesel: #9AA2A8;
  --ba-ref-feld: #C4C9C8;
  --ba-ref-linie: #D3D7D6;
  --ba-ref-linie-hell: #E4E7E6;
  --ba-ref-kruste: #7A3E12;
  --ba-ref-kruste-dunkel: #5A2C0C;
  --ba-ref-mehl: #F2E6DC;
  --ba-ref-rot: #A1261B;
  --ba-ref-schatten-rgb: 28 33 38;

  /* ---------- Schicht 2: Farben ---------- */
  --ba-color-bg: var(--ba-ref-lichttisch);
  --ba-color-surface: var(--ba-ref-papier);
  --ba-color-surface-muted: var(--ba-ref-lichttisch);
  --ba-color-text: var(--ba-ref-tinte);
  --ba-color-text-muted: var(--ba-ref-schiefer);

  --ba-color-border: var(--ba-ref-linie);
  --ba-color-border-subtle: var(--ba-ref-linie-hell);
  --ba-color-border-control: var(--ba-ref-feld);
  --ba-color-border-dashed: var(--ba-ref-kiesel);
  --ba-color-border-strong: var(--ba-ref-tinte);

  /* Hauptaktion: Kaufen, Zahlen, Veröffentlichen */
  --ba-color-primary: var(--ba-ref-kruste);
  --ba-color-primary-hover: var(--ba-ref-kruste-dunkel);
  --ba-color-on-primary: var(--ba-ref-papier);
  /* Getönte Flächen: Hinweisboxen, Etiketten, Größenvergleich */
  --ba-color-primary-subtle: var(--ba-ref-mehl);
  --ba-color-on-primary-subtle: var(--ba-ref-kruste-dunkel);

  /* Aufmerksamkeit: Zähler am Warenkorb */
  --ba-color-attention: var(--ba-ref-kruste);
  --ba-color-on-attention: var(--ba-ref-papier);

  --ba-color-price: var(--ba-ref-kruste);
  --ba-color-link: var(--ba-ref-kruste);
  --ba-color-link-hover: var(--ba-ref-kruste-dunkel);
  --ba-color-focus: var(--ba-ref-kruste);

  /* Gewählter Zustand von Pillen und Segmenten */
  --ba-color-selected: var(--ba-ref-tinte);
  --ba-color-on-selected: var(--ba-ref-papier);

  /* Umgekehrte Fläche: Toast */
  --ba-color-inverse: var(--ba-ref-tinte);
  --ba-color-on-inverse: var(--ba-ref-papier);

  --ba-color-disabled: var(--ba-ref-feld);
  --ba-color-on-disabled: var(--ba-ref-schiefer-dunkel);
  --ba-color-danger: var(--ba-ref-rot);

  /* Auswahlkreis auf Fotos, Wasserzeichen der Platzhalter */
  --ba-color-marker: rgb(var(--ba-ref-schatten-rgb) / 0.4);
  --ba-color-marker-border: var(--ba-ref-papier);
  --ba-color-watermark: rgb(255 255 255 / 0.5);
  /* Abdunklung hinter dem Seitenpanel */
  --ba-color-scrim: rgb(var(--ba-ref-schatten-rgb) / 0.35);

  /* Destruktiv (Portal-Bausteine, bausteine.css): Rahmen-Knopf in Ruhe,
     rot gefuellt, sobald der Zweit-Klick scharf ist. */
  --ba-color-danger-solid: var(--ba-ref-rot);
  --ba-color-on-danger-solid: var(--ba-ref-papier);
  --ba-color-danger-surface: color-mix(in srgb, var(--ba-ref-rot) 8%, var(--ba-ref-papier));
  --ba-color-danger-border: color-mix(in srgb, var(--ba-ref-rot) 35%, var(--ba-ref-papier));

  /* Aufgeklapptes Auswahlmenue (Portal-Dropdown) */
  --ba-color-menu: var(--ba-ref-papier);
  --ba-color-menu-border: var(--ba-ref-linie);
  --ba-color-menu-hover: var(--ba-ref-linie-hell);
  --ba-shadow-menu: 0 12px 32px rgb(var(--ba-ref-schatten-rgb) / 0.16);

  /* Segment (Ansichtsumschalter). Die Vorgaben geben das Ursprungsdesign
     wieder; theme-portal.css macht daraus das Portal-.segmented. */
  --ba-color-segment-track: var(--ba-color-surface-muted);
  --ba-color-segment-text: var(--ba-color-text);
  --ba-color-segment-on: var(--ba-color-selected);
  --ba-color-on-segment-on: var(--ba-color-on-selected);
  --ba-color-segment-count: currentColor;
  --ba-shadow-segment-on: none;
  --ba-weight-segment-count: var(--ba-weight-bold);
  --ba-segment-pad: var(--ba-space-1);
  --ba-segment-gap: var(--ba-space-1);
  --ba-segment-item-height: var(--ba-size-touch);
  --ba-segment-item-pad: var(--ba-space-3);
  --ba-radius-segment: var(--ba-radius-lg);
  --ba-radius-segment-on: var(--ba-radius-sm);

  /* Griff zum Ziehen */
  --ba-color-grip: var(--ba-ref-kiesel);

  /* ---------- Typografie ---------- */
  --ba-font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ba-font-stretch-display: 112%;
  --ba-font-stretch-brand: 125%;

  --ba-weight-regular: 400;
  --ba-weight-semibold: 600;
  --ba-weight-bold: 700;
  --ba-weight-black: 800;

  --ba-text-3xs: 11px;
  --ba-text-2xs: 12px;
  --ba-text-xs: 13px;
  --ba-text-sm: 14px;
  --ba-text-md: 15px;
  --ba-text-base: 16px;
  --ba-text-lg: 17px;
  --ba-text-xl: 18px;
  --ba-text-2xl: 20px;
  --ba-text-3xl: 22px;
  --ba-text-display: 32px;
  --ba-text-display-lg: 44px;
  --ba-text-watermark: clamp(28px, 7vw, 48px);

  --ba-leading-tight: 1.08;
  --ba-leading-snug: 1.25;
  --ba-leading-cozy: 1.45;
  --ba-leading-normal: 1.5;

  --ba-tracking-display: -0.015em;
  --ba-tracking-brand: -0.01em;

  /* ---------- Abstände (4er-Raster, mit Halbschritten) ---------- */
  --ba-space-0-5: 2px;
  --ba-space-1: 4px;
  --ba-space-1-5: 6px;
  --ba-space-2: 8px;
  --ba-space-2-5: 10px;
  --ba-space-3: 12px;
  --ba-space-3-5: 14px;
  --ba-space-4: 16px;
  --ba-space-5: 20px;
  --ba-space-6: 24px;
  --ba-space-7: 28px;
  --ba-space-8: 32px;
  --ba-space-10: 40px;
  --ba-space-12: 48px;
  --ba-space-16: 64px;

  /* ---------- Größen ---------- */
  --ba-size-touch: 44px;          /* Mindestgröße jeder Tippfläche */
  --ba-size-control: 48px;        /* Eingabefelder, Segment-Container */
  --ba-size-button-lg: 52px;
  --ba-size-header: 64px;
  --ba-size-control-sm: 36px;      /* kleine Knoepfe in Listenzeilen */
  --ba-size-checkbox: 22px;
  --ba-size-radio: 20px;
  --ba-size-marker: 30px;         /* Auswahlkreis auf der Kachel */
  --ba-size-marker-hit: 52px;     /* Tippfläche um den Auswahlkreis */
  --ba-size-badge: 18px;
  --ba-size-icon: 20px;
  --ba-size-thumb-w: 64px;
  --ba-size-thumb-h: 48px;
  --ba-size-success: 56px;
  --ba-size-dropzone-min: 260px;
  --ba-size-dropzone-compact: 140px;  /* Ablage in der Motiv-Verwaltung */
  --ba-size-progress: 6px;            /* Fortschrittsbalken beim Hochladen */
  --ba-size-admin-tile: 200px;        /* Mindestbreite Kachel in der Verwaltung */
  --ba-size-panel: 440px;             /* Seitenpanel ab md */
  --ba-content-max: 1120px;
  --ba-content-narrow: 560px;
  --ba-measure: 60ch;             /* maximale Zeilenlänge für Fließtext */
  --ba-size-segment-max: 440px;   /* Segment in der Auswahlleiste ab md */
  --ba-photo-aspect: 4 / 3;

  /* ---------- Form, Linien, Tiefe ---------- */
  --ba-radius-photo: 4px;
  --ba-radius-sm: 6px;
  --ba-radius-md: 8px;
  --ba-radius-lg: 10px;
  --ba-radius-pill: 999px;

  --ba-border-width: 1px;
  --ba-border-width-strong: 2px;

  --ba-focus-width: 3px;
  --ba-focus-offset: 2px;

  --ba-shadow-bar: 0 -4px 16px rgb(var(--ba-ref-schatten-rgb) / 0.08);
  --ba-shadow-marker: 0 1px 3px rgb(0 0 0 / 0.25);
  --ba-ring-selected: 0 0 0 3px var(--ba-color-primary);

  /* ---------- Ebenen ---------- */
  --ba-z-header: 10;
  --ba-z-bar: 20;
  --ba-z-panel: 40;
  --ba-z-toast: 50;
}