// ────────────────────────────────────────────────────────────────
// Tokens · Farben
//
// Eine Farbwelt je Theme. Die oeffentlichen Custom-Properties sind die
// stabile API — Komponenten fassen nur `var(--…)` an, nie rohe Hex-Werte.
//
// Alpha-Varianten gehoeren NICHT als feste Hex hierher, sondern werden im
// Konsumenten ueber `color-mix(in srgb, var(--token) X%, transparent)`
// gebildet, damit sie den Theme-Wechsel mitmachen. Nur die wenigen
// semantischen Schatten/Glows werden pro Theme gesetzt (siehe color-tokens).
// ────────────────────────────────────────────────────────────────
@use "sass:map";
@use "sass:color";

$colors-dark: (
  // Flaechen
  bg:           #0d1117,
  surface:      #161b22,
  surface-2:    #1c2128,
  // Linien
  line:         #30363d,
  line-soft:    rgba(139, 148, 158, .16),
  // Text
  fg:           #ffffff,
  fg-soft:      #c9d1d9,
  dim:          #adb8c2,
  muted:        #8b949e,
  faint:        #67737e,
  // Akzente + Semantik
  accent:       #58a6ff,
  ember:        #e07a2c,
  ok:           #3fb950,
  warn:         #e07a2c,
  off:          #f85149,
) !default;

$colors-light: (
  bg:           #ffffff,
  surface:      #f6f8fa,
  surface-2:    #eaeef2,
  line:         #d0d7de,
  line-soft:    rgba(31, 35, 40, .12),
  fg:           #1f2328,
  fg-soft:      #424a53,
  dim:          #656d76,
  muted:        #6e7781,
  faint:        #8c959f,
  accent:       #0969da,
  ember:        #bc4c00,
  ok:           #1a7f37,
  warn:         #9a6700,
  off:          #cf222e,
) !default;

@function _a($c, $alpha) {
  @return color.change($c, $alpha: $alpha);
}

/// Emittiert die oeffentlichen Farb-/Schatten-Tokens fuer ein Theme.
@mixin color-tokens($c) {
  @each $name, $value in $c {
    --#{$name}: #{$value};
  }

  $accent: map.get($c, accent);
  $ember:  map.get($c, ember);

  // Semantische Ableitungen (pro Theme bewusst als Konstante).
  --ember-soft:  #{_a($ember, .55)};
  --accent-soft: #{_a($accent, .30)};
  --on-accent:   #ffffff;

  // Schatten + Glows (theme-abhaengig, weil rgba).
  --shadow-sm:   0 1px 2px #{_a(#000000, .30)};
  --shadow-md:   0 6px 18px #{_a(#000000, .35)};
  --shadow-lg:   0 14px 34px #{_a(#000000, .45)};
  --glow-accent: 0 0 12px #{_a($accent, .28)};
  --glow-ember:  0 0 12px #{_a($ember, .30)};
}