/* =====================================================================
   HELIANTHUS — Semantic Token Layer
   Alle Variablen hier leiten sich von Panel-Tokens (head.php) ab.
   Nichts in dieser Datei ist hardcodiert.
   ===================================================================== */

:root {

  /* --- Radius-Aliase (Backward-compat; Panel-Tokens: --hl-radius-s / --hl-radius-m in head.php) --- */
  --hl-radius-sm: var(--hl-radius-s, 3px);
  --hl-radius-md: var(--hl-radius-m, 6px);

  /* --- Color-Surface Alias (Backward-compat) --- */
  --hl-color-surface: var(--hl-color-light);

  /* --- Ink-Abstufungen (3 Stufen; nur diese werden in Komponenten genutzt) --- */
  /* Backward-compat: helianthus.css uses both --hl-c-ink and --hl-ink-900.
     Beide zeigen auf --hl-color-ink. Nach CSS-Cleanup: --hl-c-ink entfernen. */
  --hl-c-ink:   var(--hl-color-ink);
  --hl-ink-900: var(--hl-color-ink);
  --hl-ink-700: color-mix(in srgb, var(--hl-color-ink) 70%, transparent);
  --hl-ink-500: color-mix(in srgb, var(--hl-color-ink) 50%, transparent);

  /* --- Stroke & Surface --- */
  --hl-c-stroke:       color-mix(in srgb, var(--hl-color-ink) 18%, transparent);
  --hl-c-surface-alt:  var(--hl-color-light-2);
  /* Backward-compat: beide zeigen auf --hl-color-light. Nach CSS-Cleanup: --hl-surface-1 entfernen. */
  --hl-c-surface-head: var(--hl-color-light);
  --hl-surface-1:      var(--hl-color-light);
  --hl-c-hover-accent: var(--hl-color-brand);

  /* --- Button-Tokens (Standard: Outline-Stil) --- */
  --hl-btn-bg:           transparent;
  --hl-btn-ink:          var(--hl-color-ink);
  --hl-btn-border:       var(--hl-color-ink);
  --hl-btn-hover-bg:     var(--hl-color-brand);
  --hl-btn-hover-ink:    var(--hl-color-ink);
  --hl-btn-shadow:       var(--hl-shadow-lift);

}