/* ============================================================================
   theme.css — Design-Tokens ("der Salon-Schalter")
   ----------------------------------------------------------------------------
   Einziger Ort für Farben, Schrift, Abstände, Radien, Schatten, Bewegung.
   Pro Salon wird nur dieser Token-Satz getauscht (data-theme="…") — das gesamte
   Widget + die Zentrale färben sich automatisch um. Komponenten referenzieren
   AUSSCHLIESSLICH diese Variablen, nie feste Farbwerte.
   ============================================================================ */

:root {
  /* — Farben: Rollen, nicht Namen — */
  --c-bg:              #F7F5F1;   /* Seitenhintergrund, warmes Off-White       */
  --c-surface:         #FFFFFF;   /* Karten, Eingabefelder                     */
  --c-surface-2:       #F1EDE5;   /* dezente Füllung, Hover-Flächen            */
  --c-text:            #1B1A17;   /* Haupttext, warmes Fast-Schwarz            */
  --c-text-muted:      #6E6A61;   /* Sekundärtext, Hinweise                    */
  --c-border:          #E6E1D7;   /* Haarlinien, Feld-Rahmen                   */
  --c-accent:          #9C7A54;   /* EIN ruhiger Akzent: Auswahl, Fokus        */
  --c-accent-soft:     #F0E7DA;   /* Akzent-Hauch für gewählte Flächen         */
  --c-accent-contrast: #FFFFFF;
  --c-primary:         #1B1A17;   /* Primär-Aktion (Fläche)                    */
  --c-primary-contrast:#FFFFFF;
  --c-primary-hover:   #000000;
  --c-success:         #3F7A4E;
  --c-danger:          #B23B3B;   /* nur für Validierungs-/Fehlerhinweise       */
  --c-disabled-bg:     #F1EDE5;
  --c-disabled-text:   #B7B1A6;

  /* — Typografie — */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui:      "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;

  --fs-xs:   0.75rem;    /* 12 — Labels, Meta            */
  --fs-sm:   0.8125rem;  /* 13 — Hinweise               */
  --fs-base: 0.9375rem;  /* 15 — UI-Standard            */
  --fs-lg:   1.0625rem;  /* 17                          */
  --fs-xl:   1.375rem;   /* 22 — Abschnittstitel        */
  --fs-2xl:  1.875rem;   /* 30                          */
  --fs-3xl:  2.75rem;    /* 44 — Display                */

  --lh-tight: 1.12;
  --lh:       1.55;
  --tracking-tight: -0.02em;
  --tracking-wide:   0.08em;

  /* — Radien — */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* — Abstände (4px-Raster) — */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 72px;

  /* — Schatten: bewusst dezent (Minimalismus) — */
  --shadow-sm: 0 1px 2px rgba(27, 26, 23, 0.04);
  --shadow-md: 0 8px 30px -16px rgba(27, 26, 23, 0.22);
  --ring:      0 0 0 3px var(--c-accent-soft), 0 0 0 1.5px var(--c-accent);

  /* — Bewegung: ruhig, kurz — */
  --ease: cubic-bezier(0.2, 0.6, 0.2, 1);
  --dur:  180ms;
}

/* ── Beispiel-Salon-Themes: NUR diese Tokens ändern sich, sonst nichts ──────
   Beleg, dass dieselbe Oberfläche pro Salon umfärbbar ist (Phase 1.5).        */

[data-theme="salbei"] {
  --c-bg:          #F3F5F0;
  --c-surface-2:   #E9EEE3;
  --c-border:      #DFE6D8;
  --c-accent:      #5F7355;
  --c-accent-soft: #E4EBDD;
}

[data-theme="pflaume"] {
  --c-bg:          #F6F2F4;
  --c-surface-2:   #EFE6EB;
  --c-border:      #E7DCE3;
  --c-accent:      #7E4A63;
  --c-accent-soft: #EFE0E9;
}