/* ============================================================
   COLORS — T Business Design System
   Telekom "Liquid Brand Design". Magenta is the one heroic
   brand colour; everything else is a restrained neutral scale
   plus quiet functional accents. Magenta does the heavy lifting.
   ============================================================ */

:root {
  /* ---- Brand: Telekom Magenta (the visual constant) ---- */
  --magenta:           #E20074; /* registered Telekom Magenta */
  --magenta-hover:     #C70067; /* hover */
  --magenta-pressed:   #A8004F; /* active / pressed */
  --magenta-tint:      #FBE1EF; /* soft fill / selected bg */
  --magenta-tint-2:    #F7C6DF; /* slightly stronger tint */

  /* ---- Neutrals: cool grey scale ---- */
  --white:   #FFFFFF;
  --black:   #000000;
  --grey-50:  #F7F7F8;
  --grey-100: #ECECEE;
  --grey-150: #E2E2E5;
  --grey-200: #D1D1D6;
  --grey-300: #B4B4BB;
  --grey-400: #8C8C95;
  --grey-500: #6C6C75;
  --grey-600: #4D4D55;
  --grey-700: #34343A;
  --grey-800: #232328;
  --grey-900: #161619;

  /* ---- Functional ---- */
  --success:        #1F8A3B;
  --success-tint:   #E6F4EA;
  --warning:        #F4A100;
  --warning-tint:   #FDF1DA;
  --error:          #D60A2E;
  --error-tint:     #FBE5E9;
  --info:           #0A7DC2; /* Telekom secondary blue */
  --info-tint:      #E2F0FA;

  /* ============================================================
     SEMANTIC ALIASES — reference these in components
     ============================================================ */

  /* Brand / interactive */
  --color-primary:        var(--magenta);
  --color-primary-hover:  var(--magenta-hover);
  --color-primary-active: var(--magenta-pressed);
  --color-on-primary:     var(--white);
  --color-selected-bg:    var(--magenta-tint);

  /* Text */
  --text-primary:    var(--grey-900);
  --text-secondary:  var(--grey-500);
  --text-tertiary:   var(--grey-400);
  --text-disabled:   var(--grey-300);
  --text-brand:      var(--magenta);
  --text-inverse:    var(--white);
  --text-link:       var(--magenta);

  /* Surfaces */
  --surface-page:     var(--white);
  --surface-subtle:   var(--grey-50);
  --surface-sunken:   var(--grey-100);
  --surface-card:     var(--white);
  --surface-inverse:  var(--grey-900);
  --surface-brand:    var(--magenta);

  /* Borders */
  --border-subtle:   var(--grey-150);
  --border-default:  var(--grey-200);
  --border-strong:   var(--grey-400);
  --border-brand:    var(--magenta);

  /* Focus */
  --focus-ring:      var(--magenta);
}