:root {
  /* ───────────────────────────────────────────────── */
  /* ─── Schicht 1: Roh-Skalen (Werte) ─────────────── */
  /* ───────────────────────────────────────────────── */

  --c-teal-100: #d9f0ee;
  --c-teal-500: #2bb3a3;
  --c-teal-700: #1a7a70;
  --c-green-100: #B8E1C9;
  --c-green-300: #a8e4c8;   /* mint — chatbot accent */
  --c-green-500: #5fb22d;
  --c-green-700: #3e8a24;
  --c-blue-500: #3bbdcb;
  --c-blue-100: #D2F9FA;


  --c-ink-800: #0e3a3a;     /* dark teal — chatbot ink-soft */
  --c-ink-900: #001a1f;     /* near-black teal — chatbot ink */
  --c-neutral-0: #ffffff;
  --c-neutral-50:  #f9fafa;   /* tmp */
  --c-neutral-100: #f5f6f7;
  --c-neutral-200: #f1f2f3;   /* tmp */
  --c-neutral-300: #e6e8ea;   /* tmp */
  --c-neutral-400: #d5d8dc;   /* tmp */
  --c-neutral-500: #babfc5;   /* tmp */
  --c-neutral-550: #9da5ae;   /* tmp */
  --c-neutral-600: #818a96;   /* tmp */
  --c-neutral-650: #515962;   /* tmp */
  --c-neutral-700: #3a3f44;
  --c-neutral-750: #23262a;   /* tmp */
  --c-neutral-800: #0c0d0e;   /* tmp */
  --c-neutral-900: #0e1216;

  /* Status-Skalen — tmp, sollten mit Design abgestimmt werden */
  --c-success-100: #f2fdf5;   /* tmp */
  --c-success-500: #0a875a;   /* tmp */
  --c-success-700: #06583a;   /* tmp */
  --c-success-900: #03281b;   /* tmp */
  --c-info-100:    #f0f7ff;   /* tmp */
  --c-info-500:    #2563eb;   /* tmp */
  --c-info-700:    #134cca;   /* tmp */
  --c-info-900:    #0e3b9c;   /* tmp */
  --c-warning-100: #fffbeb;   /* tmp */
  --c-warning-500: #f59e0b;   /* tmp */
  --c-warning-700: #c57f08;   /* tmp */
  --c-warning-900: #945f06;   /* tmp */
  --c-danger-100:  #fef1f4;   /* tmp */
  --c-danger-500:  #dc2626;   /* tmp */
  --c-danger-700:  #b21d1d;   /* tmp */
  --c-danger-900:  #861616;   /* tmp */

  /* Schicht 1 — Raw-Skala (für Component-internes Feintuning).
     Klassen-System (spacing.css) bedient sich NICHT hier, sondern aus
     der semantischen Skala darunter. Neue Werte hier nur ergänzen,
     wenn sie wirklich in einer Component gebraucht werden. */
  --space-0: 0;
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px;
  --space-12: 48px; --space-16: 64px; --space-24: 96px;

  /* Schicht 2 — Kuratierte T-Shirt-Skala (Single Source für Utilities).
     Genau diese Werte werden in spacing.css zu Klassen ausgerollt.
     Erweiterung nur nach Design-Abstimmung — jede neue Stufe vervielfacht
     die Anzahl generierter Klassen. */
  --space-xs:  var(--space-1);   /*  4px */
  --space-sm:  var(--space-2);   /*  8px */
  --space-md:  var(--space-4);   /* 16px */
  --space-lg:  var(--space-6);   /* 24px */
  --space-xl:  var(--space-8);   /* 32px */
  --space-2xl: var(--space-12);  /* 48px */
  --space-3xl: var(--space-24);  /* 96px */

  /* Breakpoints — Dokumentation. CSS-Vars sind in @media nicht nutzbar,
     daher müssen die Raw-Werte in spacing.css gespiegelt sein.
     Klassen-System nutzt nur md & lg (Mobile-first). */
  --bp-md:  768px;
  --bp-lg: 1024px;

  /* Radius-Skala — bereits semantisch (T-Shirt). Single Source für
     radius.css. Neue Stufen nur nach Design-Abstimmung. */
  --radius-0:    0;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-2xl: 32px;
  --radius-pill: 999px;

  --font-sans: "Inter", system-ui, sans-serif;
  --fs-100: 12px; --fs-150: 13px; --fs-200: 14px; --fs-300: 16px;
  --fs-400: 18px; --fs-500: 20px; --fs-600: 24px;
  --fs-700: 32px; --fs-800: 40px; --fs-900: 56px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow-md: 0 4px 12px rgba(0,0,0,.08);
  --shadow-lg: 0 10px 30px rgba(0,0,0,.14);
  --shadow-floating: 0 18px 50px rgba(0,0,0,.18);
  /* Glaskante: dünne Highlightlinie an der Oberkante einer Glas-Surface */
  --shadow-glass-edge: inset 0 1px 0 rgba(255,255,255,.10);

  /* ─── Motion ─────────────────────────────────── */
  --motion-fast:    .15s;
  --motion-base:    .25s;
  --motion-slow:    .4s;
  --ease-out:       cubic-bezier(.16, 1, .3, 1);
  --ease-standard:  cubic-bezier(.4, 0, .2, 1);

  /* ─── Backdrop-Blur Stufen ──────────────────── */
  --blur-glass-sm:  10px;
  --blur-glass-md:  14px;
  --blur-glass-lg:  22px;

  /* ───────────────────────────────────────────────── */
  /* ─── Schicht 2: Semantik (Aliase) ──────────────── */
  /* ───────────────────────────────────────────────── */
  --color-brand-primary: var(--c-teal-500);
  --color-brand-secondary: var(--c-teal-700);
  --color-brand-ok: var(--c-green-500);
  --color-brand-inway: var(--c-blue-500);

  --color-brand-accent: var(--c-teal-700);
  --color-brand-mint: var(--c-green-300);
  --color-brand-ink: var(--c-ink-900);
  --color-brand-ink-soft: var(--c-ink-800);

  /* Horizontale Brand-Variante (z. B. Chatbot Pills/Send) */
  --gradient-brand-horizontal: linear-gradient(90deg,
    var(--c-teal-500) 0%, var(--c-green-500) 100%);
  --gradient-brand-horizontal-soft: linear-gradient(90deg,
    rgba(43,179,163,.55) 0%, rgba(108,194,74,.55) 100%);

  --color-surface-default: var(--c-neutral-0);
  --color-surface-muted: var(--c-neutral-100);
  --color-surface-inverse: var(--c-neutral-900);

  --color-text-default: var(--c-neutral-900);
  --color-text-muted: var(--c-neutral-700);
  --color-text-inverse: var(--c-neutral-0);

  /* Vordergrund auf dunklem / inversem Untergrund — vier Helligkeitsstufen
     für Body, sekundären Text, gedämpfte Labels und Hinweise. */
  --color-text-on-inverse:        var(--c-neutral-0);
  --color-text-on-inverse-muted:  rgba(255,255,255,.78);
  --color-text-on-inverse-dim:    rgba(255,255,255,.55);
  --color-text-on-inverse-faint:  rgba(255,255,255,.32);

  --color-border-subtle: rgba(14,18,22,.08);

  /* Ränder auf invertierten/Glas-Oberflächen */
  --color-border-on-inverse:        rgba(255,255,255,.14);
  --color-border-on-inverse-strong: rgba(255,255,255,.28);

  /* Glas-Oberflächen — halbtransparent über Gradient/Bild/Dark-Surface.
     Stufe = wahrgenommene Helligkeit. */
  --color-surface-glass-low:   rgba(255,255,255,.05);
  --color-surface-glass:       rgba(255,255,255,.07);
  --color-surface-glass-mid:   rgba(255,255,255,.13);
  --color-surface-glass-high:  rgba(255,255,255,.22);

  /* Feedback-Aliase — tmp */
  --color-feedback-success: var(--c-success-500); /* tmp */
  --color-feedback-info:    var(--c-info-500);    /* tmp */
  --color-feedback-warning: var(--c-warning-500); /* tmp */
  --color-feedback-danger:  var(--c-danger-500);  /* tmp */

  /* Soft-Tint der Primärfarbe für aktive States (Pills, Toggle-Buttons) — tmp */
  --color-brand-primary-soft: rgba(43, 179, 163, .08);  /* tmp */

  --button-primary-bg: var(--color-brand-primary);
  --button-primary-bg-hover: var(--c-teal-700);
  --button-primary-text: var(--color-text-inverse);

  /* Multiply-Gradient für Klammer-Mood */
  --gradient-brand-mesh: linear-gradient(135deg,
    var(--c-teal-500), var(--c-green-500));
}