/* S&S Herrenausstatter — verbindliche UI-Tokens */
@import url("https://fonts.googleapis.com/css2?family=Urbanist:wght@400;500;600;700&display=swap");

:root {
  --font-ui: "Urbanist", "Segoe UI Variable", "Segoe UI", sans-serif;

  --ui-ink: #222222;
  --ui-canvas: #f0eff2;
  --ui-surface: #ffffff;
  --ui-surface-soft: #f7f7f8;
  /* Akzente sind exakt die Farben der Umsatzbalken. Alle weicheren und
     dunkleren Abstufungen werden in style.css daraus abgeleitet. */
  --ui-yellow: #f7e6a6;
  --ui-green: #bee6cb;
  --ui-muted: rgba(34, 34, 34, 0.58);
  --ui-line: rgba(34, 34, 34, 0.08);  /* alle Trennlinien und feinen Rahmen */
  --ui-glass: rgba(240, 239, 242, 0.78);

  --type-display: clamp(2.75rem, 5vw, 4.5rem);
  --type-heading: clamp(1.875rem, 3vw, 2.5rem);

  /* Schriftskala — verbindlich fuer die gesamte Oberflaeche.
     Sechs Stufen, jede mit klarer Rolle. Neue Groessen werden nicht erfunden,
     sondern auf die naechstliegende Stufe gelegt. */
  --fs-xs: 11.5px;     /* Diagrammbeschriftung und Tabellenkoepfe             */
  --fs-small: 13px;    /* Labels, Eyebrow, Chips, Metadaten, Hilfetexte       */
  --fs-base: 14px;     /* Grundgroesse: Fliesstext, Tabellen, Buttons, Felder */
  --fs-title: 17px;    /* Panel- und Kartentitel (h2, h3)                     */
  --fs-head: 23px;     /* Titel in Modal, Drawer, Compose; mittlere Kennzahl  */
  --fs-figure: 33px;   /* grosse Kennzahl in den Trendkarten                  */

  /* Laufweite (Abstand zwischen den Buchstaben) — sechs Stufen, an die
     Schriftskala gekoppelt: je groesser der Text, desto enger; Versalien
     bekommen Luft. Auch hier gilt: keine neuen Werte, nur diese Stufen. */
  --ls-display: -0.03em;   /* grosse Zahlen, Seiten- und Overlay-Titel        */
  --ls-tight: -0.01em;    /* Karten- und Panel-Titel, hervorgehobene Namen   */
  --ls-normal: 0.012em;          /* Fliesstext, Eingaben, Navigation               */
  --ls-soft: 0.018em;       /* kleine Beschriftungen an Feldern               */
  --ls-wide: 0.08em;       /* Kleinlabels im Schichtplan, Metazeilen         */
  --ls-wider: 0.2em;      /* Versalien: Eyebrow, Tabellenkoepfe             */

  /* Schriftfarben — genau drei, mehr gibt es nicht. */
  --text: #222222;          /* Primaertext, Ueberschriften, Zahlen           */
  --text-muted: #83828a;    /* alles Zweitrangige: Labels, Meta, Captions    */
  --text-inverse: #ffffff;  /* Schrift auf dunklen Flaechen                  */

  --space-1: 8px;
  --space-2: 12px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;

  --radius-control: 14px;
  --radius-card: 60px;
  --radius-modal: 32px;
  --radius-pill: 999px;

  --glass-blur: 28px;
  --shadow-glass: 0 24px 80px rgba(34, 34, 34, 0.14);
  --motion-fast: 160ms;
  --motion-modal: 240ms;
  --ease-clean: cubic-bezier(0.2, 0.8, 0.2, 1);
}