/* ===================================================
   Base — Brücke zwischen alten und neuen Tokens
   ---------------------------------------------------
   Aliased die Properties, die unsere bestehenden Vue-Components
   noch verwenden (--color-*, --space-*, --radius-*, ...) auf das
   neue Design-System (--fg, --s-N, --r-md, ...). So funktionieren
   alle bestehenden Components weiter, während neuer Code direkt
   die neuen Token-Namen nutzt.
   =================================================== */

:root {
  /* Farben — Text */
  --color-text-primary:    var(--fg);
  --color-text-muted:      var(--muted);
  --color-text-error:      var(--tag-danger-fg);
  --color-text-on-primary: var(--accent-fg);

  /* Farben — Hintergrund */
  --color-bg-app:        var(--bg);
  --color-bg-card:       var(--surface);
  --color-bg-card-blur:  color-mix(in oklab, var(--surface) 85%, transparent);
  --color-bg-input:      var(--surface);

  /* Farben — Akzent */
  --color-primary:             var(--accent);
  --color-primary-hover:       var(--accent-hover);
  --color-primary-focus-ring:  var(--accent-soft);

  /* Farben — Border */
  --color-border:         var(--border);
  --color-border-focus:   var(--accent);
  --color-border-subtle:  var(--divider);

  /* Spacing */
  --space-xs: var(--s-1);
  --space-sm: var(--s-2);
  --space-md: var(--s-4);
  --space-lg: var(--s-5);
  --space-xl: var(--s-7);

  /* Radius */
  --radius-sm: var(--r-sm);
  --radius-md: var(--r-md);
  --radius-lg: var(--r-lg);

  /* Typography */
  --font-family-base: var(--font-body);
  --font-size-sm:    12px;
  --font-size-base:  14px;
  --font-size-lg:    18px;

  /* Shadows */
  --shadow-card: var(--shadow-md);

  /* Layout */
  --header-h: 56px;
  --nav-h: 60px;
}

/* ── Base reset (war in altem base.css) ─────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  /* Mit literalem Fallback IM var(): selbst wenn --font-body fehlt (tokens.css
     nicht geladen), niemals die Serifen-Default-Schrift des Browsers. */
  font-family: var(--font-body, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
}

#app {
  height: 100%;
}