/* yet.digital — Brand Color Tokens
 * Canonical Quelle für die Markenfarben.
 * Andere Token-Formate (SCSS, JSON, Tailwind) werden hieraus abgeleitet.
 */

:root {
  /* --- Primärpalette (Pink → Blau Gradient) --- */
  --yet-pink:        #ff499e;  /*  1 / 6  Hot Pink            */
  --yet-orchid:      #d264b6;  /*  2 / 6  Orchid              */
  --yet-lilac:       #a480cf;  /*  3 / 6  Lilac               */
  --yet-periwinkle:  #779be7;  /*  4 / 6  Periwinkle          */
  --yet-azure:       #49b6ff;  /*  5 / 6  Azure               */
  --yet-sky:         #5abdff;  /*  6 / 6  Sky                 */

  /* --- Signature-Gradient --- */
  --yet-gradient:        linear-gradient(135deg, #ff499e 0%, #a480cf 50%, #49b6ff 100%);
  --yet-gradient-soft:   linear-gradient(135deg, #ff499e22 0%, #49b6ff22 100%);
  --yet-gradient-warm:   linear-gradient(135deg, #ff499e 0%, #d264b6 100%);
  --yet-gradient-cool:   linear-gradient(135deg, #779be7 0%, #5abdff 100%);

  /* --- Semantische Rollen (für UI/Web) --- */
  --color-brand-primary:    var(--yet-pink);
  --color-brand-secondary:  var(--yet-azure);
  --color-brand-mid:        var(--yet-lilac);
  --color-brand-accent:     var(--yet-orchid);
  --color-info:             var(--yet-azure);

  /* --- Neutrals (abgestimmt auf die Markenfarben, leicht kühl) --- */
  --yet-ink:    #0e0f1a;  /* Haupt-Textfarbe, fast schwarz mit Blaustich */
  --yet-coal:   #1f2030;  /* Sekundär-Text / dunkle Flächen             */
  --yet-fog:    #6b6e85;  /* Muted Text                                 */
  --yet-mist:   #c8cad6;  /* Borders, Dividers                          */
  --yet-paper:  #f7f7fb;  /* Off-White Hintergrund                      */
  --yet-white:  #ffffff;

  /* --- Surface-Tokens --- */
  --color-bg:           var(--yet-white);
  --color-bg-elevated:  var(--yet-paper);
  --color-text:         var(--yet-ink);
  --color-text-muted:   var(--yet-fog);
  --color-border:       var(--yet-mist);
}

/* Dark-Variante: dunkle Flächen, Markenfarben bleiben kräftig */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg:           var(--yet-ink);
    --color-bg-elevated:  var(--yet-coal);
    --color-text:         var(--yet-paper);
    --color-text-muted:   var(--yet-mist);
    --color-border:       #2a2c3f;
  }
}