/* ===========================================================================
   Design-Tokens — Sacred Taste CRM
   ---------------------------------------------------------------------------
   EINZIGE Quelle für Farben, Schrift, Rundungen, Abstände und Bewegung.
   Wer das Erscheinungsbild ändern will, ändert Werte HIER — nirgends sonst
   im CSS steht ein fester Farbwert oder Radius.

   Beispiel: soll alles kantiger werden, genügt --radius-md: 3px.
   Soll die Marke von Kakao auf etwas anderes wechseln, reichen die vier
   Werte unter "Markenfarben".
   =========================================================================== */

:root {
  /* --- Markenfarben ------------------------------------------------------
     Übernommen von sacredtaste.ch. Kakao: warmes Creme auf dunklem Braun.   */
  --brand-cream:      #F5F3E6;  /* Hintergrund, Shop-Original                */
  --brand-ink:        #312117;  /* Dunkelbraun, Shop-Original                */
  --brand-cacao:      #6B4A32;  /* mittleres Kakaobraun                      */
  --brand-accent:     #B8873B;  /* warmes Gold — Fokus, Aktion, Akzent       */

  /* --- Abgeleitete Flächen ---------------------------------------------- */
  --color-bg:            var(--brand-cream);
  --color-surface:       #FBFAF3;  /* Karten: eine Spur heller als der Grund */
  --color-surface-sunk:  #EFEBD9;  /* eingelassene Flächen, Code-Blöcke      */

  /* --- Text -------------------------------------------------------------- */
  --color-text:          var(--brand-ink);
  --color-text-muted:    rgba(49, 33, 23, 0.62);
  --color-text-faint:    rgba(49, 33, 23, 0.42);
  --color-text-oncolor:  var(--brand-cream);

  /* --- Linien ------------------------------------------------------------
     Bewusst fein. Eine Umrandung soll das Feld begrenzen, nicht umrahmen.   */
  --color-border:        rgba(49, 33, 23, 0.16);
  --color-border-strong: rgba(49, 33, 23, 0.30);
  --color-border-focus:  var(--brand-accent);
  --border-width:        1px;

  /* --- Statusfarben ------------------------------------------------------ */
  --color-danger:        #A33A2A;
  --color-danger-bg:     rgba(163, 58, 42, 0.09);
  --color-success:       #4A6B3A;
  --color-success-bg:    rgba(74, 107, 58, 0.10);

  /* --- Schrift -----------------------------------------------------------
     Quincy für Überschriften — dieselbe Schrift wie der Shop, geladen von
     dessen CDN. Für Fliesstext und Bedienelemente die Systemschrift: schnell,
     ohne Nachladen, und auf jedem Gerät gut lesbar. Entspricht dem
     Body-Stack des Shops.                                                   */
  --font-display: "Quincy", Georgia, "Times New Roman", serif;
  --font-body: "Avenir Next", -apple-system, BlinkMacSystemFont, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --weight-display: 900;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* Fliessende Grössen — passen sich der Viewportbreite an.                 */
  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-lg:   1.0625rem;
  --text-xl:   1.375rem;
  --text-2xl:  clamp(1.75rem, 4vw, 2.25rem);
  --text-3xl:  clamp(2.25rem, 6vw, 3.25rem);

  --leading-tight: 1.1;
  --leading-normal: 1.55;
  --tracking-wide: 0.14em;

  /* --- Abstände ----------------------------------------------------------
     Vierer-Raster. Alles Vertikale ist ein Vielfaches davon.                */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3.5rem;

  /* --- Rundungen ---------------------------------------------------------
     "Leicht abgerundet": genug, um weich zu wirken, zu wenig, um als Pille
     zu lesen. Felder und Knöpfe teilen sich denselben Wert, damit
     nebeneinanderstehende Elemente dieselbe Silhouette haben.               */
  --radius-sm: 6px;
  --radius-md: 10px;   /* Eingabefelder, Knöpfe                              */
  --radius-lg: 16px;   /* Karten                                            */
  --radius-full: 999px;

  /* --- Schatten ----------------------------------------------------------
     Sehr zurückhaltend und warm getönt statt neutralem Grau — neutrales
     Schwarz wirkt auf cremefarbenem Grund schmutzig.                        */
  --shadow-sm: 0 1px 2px rgba(49, 33, 23, 0.05);
  --shadow-md: 0 2px 8px rgba(49, 33, 23, 0.06), 0 1px 2px rgba(49, 33, 23, 0.04);
  --shadow-lg: 0 8px 32px rgba(49, 33, 23, 0.10), 0 2px 8px rgba(49, 33, 23, 0.05);

  /* --- Fokus -------------------------------------------------------------
     Ein Ring, kein Rahmenwechsel: springt nicht im Layout und bleibt auch
     auf farbigen Flächen sichtbar.                                          */
  --focus-ring: 0 0 0 3px rgba(184, 135, 59, 0.28);

  /* --- Bewegung ---------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 120ms;
  --duration-normal: 220ms;
  --duration-slow: 420ms;

  /* --- Layout ------------------------------------------------------------ */
  --width-form: 26rem;    /* Anmeldekarte                                    */
  /* 64rem war an Fliesstext bemessen. Die Verwaltungstabellen (Benutzer,
     Mandanten, Leads) brauchen mehr, sonst scrollen sie waagrecht, obwohl
     daneben der halbe Bildschirm leer ist. Lange Texte bleiben trotzdem
     schmal — sie begrenzen sich selbst ueber `max-width: 60ch`. */
  --width-content: 84rem;
  --field-height: 2.875rem;
}