/* ============================================================
   r-tec — Color tokens  (CI 2018 "RTEC CI 2018")
   ------------------------------------------------------------
   RULE: a maximum of FOUR colors may appear together.
   RULE: the colors RED and ORANGE must NEVER be used in any
         r-tec product (print or online) — the single exception
         is --rtec-warning, used only to flag warnings/errors.
   The palette is anchored by black & white; the six CI hues
   act as accents drawn from the r-tec gradient keyvisual.
   ============================================================ */

:root {
  /* --- Base / neutrals --- */
  --rtec-black:   #000000;
  --rtec-white:   #ffffff;

  /* Neutral grays (for UI surfaces, borders, muted text) */
  --rtec-gray-900: #111111;
  --rtec-gray-800: #1c1c1c;
  --rtec-gray-700: #333333;
  --rtec-gray-600: #555555;
  --rtec-gray-500: #777777;
  --rtec-gray-400: #9b9b9b;
  --rtec-gray-300: #c4c4c4;
  --rtec-gray-200: #e2e2e2;
  --rtec-gray-100: #f2f2f2;
  --rtec-gray-50:  #f8f8f8;

  /* --- CI accent hues (exact RGB from brand manual) --- */
  --rtec-blau:     #0000ff;   /* r-tec blau     rgb(0,0,255)    */
  --rtec-lila:     #6e2dc8;   /* r-tec lila     rgb(110,45,200) */
  --rtec-magenta:  #b40f82;   /* r-tec magenta  rgb(180,15,130) */
  --rtec-tuerkis:  #00d2be;   /* r-tec türkis   rgb(0,210,190)  */
  --rtec-gruen:    #a0e128;   /* r-tec grün     rgb(160,225,40) */
  --rtec-gelb:     #fff000;   /* r-tec gelb     rgb(255,240,0)  */

  /* Warning — the ONLY sanctioned use of red. Use sparingly. */
  --rtec-warning:  #fa0f28;   /* Warnfarbe      rgb(250,15,40)  */

  /* --- Tint steps (brand uses 100/80/60/40/20%) --- */
  /* türkis */
  --rtec-tuerkis-80: #33dbcb;
  --rtec-tuerkis-60: #66e4d8;
  --rtec-tuerkis-40: #99ede6;
  --rtec-tuerkis-20: #ccf6f2;
  /* lila */
  --rtec-lila-80: #8b57d3;
  --rtec-lila-60: #a881de;
  --rtec-lila-40: #c5abe9;
  --rtec-lila-20: #e2d5f4;
  /* magenta */
  --rtec-magenta-80: #c33f9b;
  --rtec-magenta-60: #d26fb4;
  --rtec-magenta-40: #e19fcd;
  --rtec-magenta-20: #f0cfe6;

  /* ============================================================
     Semantic aliases — reference these in components / layouts
     ============================================================ */
  --color-bg:            var(--rtec-white);
  --color-bg-inverse:    var(--rtec-black);
  --color-surface:       var(--rtec-white);
  --color-surface-muted: var(--rtec-gray-50);
  --color-surface-dark:  var(--rtec-black);

  --color-text:          var(--rtec-black);
  --color-text-muted:    var(--rtec-gray-600);
  --color-text-inverse:  var(--rtec-white);

  --color-line:          var(--rtec-black);   /* default rule color */
  --color-border:        var(--rtec-gray-300);
  --color-border-strong: var(--rtec-black);

  --color-accent:        var(--rtec-tuerkis);  /* primary accent */
  --color-accent-2:      var(--rtec-lila);
  --color-accent-3:      var(--rtec-magenta);
  --color-link:          var(--rtec-black);    /* links are black; emphasis via underline */
  --color-danger:        var(--rtec-warning);

  /* The keyvisual gradient — yellow→green→türkis→blau→lila→magenta
     (deliberately OMITS red & orange) */
  --rtec-gradient: linear-gradient(90deg,
      var(--rtec-gelb) 0%,
      var(--rtec-gruen) 22%,
      var(--rtec-tuerkis) 44%,
      var(--rtec-blau) 64%,
      var(--rtec-lila) 84%,
      var(--rtec-magenta) 100%);
}