:root {
  /* ── Telekom Scale Design Tokens (offiziell, NPM @telekom/design-tokens) ── */

  /* Primärfarbe – echtes Telekom-Magenta */
  --t-magenta:          #e20074;
  --t-magenta-hovered:  #c00063;
  --t-magenta-pressed:  #9e0051;

  /* Hintergründe */
  --bg-canvas:          #ffffff;
  --bg-subtle:          #efeff0;
  --bg-faint:           #dfdfe1;

  /* Text */
  --text-standard:      #000000;
  --text-additional:    hsla(0, 0%, 0%, 0.65);
  --text-disabled:      hsla(0, 0%, 0%, 0.4);

  /* UI-Greys */
  --ui-regular:         #929296;
  --ui-strong:          #747478;
  --ui-extra-strong:    #242426;
  --ui-disabled:        #d0d0d2;

  /* Borders */
  --border-standard:    hsla(0, 0%, 0%, 0.44);
  --border-hovered:     hsla(0, 0%, 0%, 0.71);
  --border-disabled:    hsla(0, 0%, 0%, 0.14);

  /* Hover/Press Fill */
  --fill-hovered:       hsla(0, 0%, 0%, 0.07);
  --fill-pressed:       hsla(0, 0%, 0%, 0.21);

  /* Funktionale Farben */
  --functional-success: #00b367;
  --functional-danger:  #e82010;
  --functional-warning: #f97012;
  --functional-link:    #2238df;

  /* Border Radius (Telekom Scale) */
  --radius-none:        0rem;
  --radius-xs:          0.125rem;   /* 2px  */
  --radius-sm:          0.25rem;    /* 4px  */
  --radius-md:          0.375rem;   /* 6px  */
  --radius-standard:    0.5rem;     /* 8px  — Telekom-Standard */
  --radius-lg:          0.75rem;    /* 12px */
  --radius-pill:        62.4375rem;

  /* Motion */
  --motion-duration:    200ms;
  --motion-easing:      cubic-bezier(0.4, 0, 0.6, 1);
  --transition:         var(--motion-duration) var(--motion-easing);

  /* Schatten (Telekom Scale) */
  --shadow-app-bar:     0px 1px 0px 0px hsla(0,0%,0%,0.05),
                        0px 2px 8px 0px hsla(0,0%,0%,0.05);
  --shadow-raised:      0px 8px 32px 0px hsla(0,0%,0%,0.1),
                        0px 4px 8px 0px hsla(0,0%,0%,0.1);
  --shadow-overlay:     0px 24px 96px 0px hsla(0,0%,0%,0.1),
                        0px 12px 24px 0px hsla(0,0%,0%,0.1);

  /* Schrift */
  --font-family:        'Roboto', TeleNeoWeb, sans-serif;
  --font-size-badge:    0.625rem;
  --font-size-small:    0.75rem;
  --font-size-caption:  0.875rem;
  --font-size-body:     1rem;

  /* ── Rückwärtskompatible Aliase (bestehender Code) ── */
  --pure-black:         #000000;
  --pure-white:         #ffffff;
  --pure-grey:          #929296;
  --light-grey:         #dfdfe1;
  --bg-grey:            #efeff0;
  --dark-grey:          #2a2a2d;
  --t-success:          #00b367;
  --t-danger:           #e82010;
  --t-link:             #2238df;

  /* ── Chat-spezifisch ── */
  --bubble-radius:      0.75rem;
  --shadow-bubble:      0 2px 8px hsla(0,0%,0%,0.08);
  --shadow-input:       0 4px 24px hsla(0,0%,0%,0.08);
}