/* ══════════════════════════════════════════════════════════════
   Collrd — Design Tokens
   Version: 2.1 | Stand: 03. April 2026
   Alle CSS Custom Properties (Design-System-Tokens + Legacy-Aliase)
   Referenz: design_system_v2.md
   F5: Typografie-Skala (--type-*), Legacy-Font-Tokens deprecated
   F6b: Breakpoint-Referenz, Touch-Target-Standard
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   Breakpoints (Referenz — CSS Custom Properties nicht in @media nutzbar)
   Einheitliches System ab F6b. Keine anderen Werte verwenden.

   Phone:   max-width: 480px   → Modals fullscreen (Bottom-Sheet), kompakte Layouts
   Tablet:  max-width: 1024px  → Sidebar → Bottom-Bar + Drawer, Single-Column
   Desktop: min-width: 1025px  → Sidebar sichtbar, Multi-Column
   Wide:    min-width: 1280px  → Max-Width Container

   Touch-Target-Minimum: 44px (global, kein Desktop/Mobile-Split)
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ═══════════════════════════════════════════════════════════
     Design-System Tokens (Neon on Dark Velvet)
     Referenz: design_system_v2.md
     ═══════════════════════════════════════════════════════════ */

  /* ── Hintergründe (Dark Velvet) ─────────── */
  --bg-void:       #08080c;
  --bg-surface:    #0e0e14;
  --bg-card:       #13131c;
  --bg-elevated:   #1c1c2a;
  --bg-hover:      #252538;
  --bg-overlay:    rgba(8,8,12,0.85);

  /* ── Borders ────────────────────────────── */
  --border-subtle:  rgba(255,255,255,0.06);
  --border-default: rgba(255,255,255,0.10);
  --border-strong:  rgba(255,255,255,0.18);

  /* ── Gold (Gamification) ────────────────── */
  --gold:          #c9a84c;
  --gold-light:    #f5e6b8;
  --gold-dim:      #9a7a2e;
  --gold-soft:     rgba(201,168,76,0.10);
  --gold-glow:     rgba(201,168,76,0.30);

  /* ── Neon-Farben (Primär-Trias) ─────────── */
  --neon-magenta:      #ff2d7b;
  --neon-magenta-soft: rgba(255,45,123,0.12);
  --neon-magenta-glow: rgba(255,45,123,0.4);
  --neon-cyan:         #00e5ff;
  --neon-cyan-soft:    rgba(0,229,255,0.10);
  --neon-cyan-glow:    rgba(0,229,255,0.35);
  --neon-violet:       #a855f7;
  --neon-violet-soft:  rgba(168,85,247,0.12);
  --neon-violet-glow:  rgba(168,85,247,0.30);

  /* ── Text ───────────────────────────────── */
  --text-primary:   #f4f4f8;
  --text-secondary: #9898aa;
  --text-tertiary:  #6b6b80;
  --text-disabled:  #3e3e4e;

  /* ── Status ─────────────────────────────── */
  --status-error:   #ff4d6a;
  --status-success: #4ade80;
  --status-warning: #fbbf24;
  --status-info:    var(--neon-cyan);

  /* ── Radii ──────────────────────────────── */
  --radius-sm:     6px;
  --radius-md:     10px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --radius-full:   9999px;

  /* ── Spacing (8px base) ─────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* ── Typografie ──────────────────────────── */
  --font-display: 'Outfit', -apple-system, sans-serif;
  --font-body:    'Outfit', -apple-system, sans-serif;
  --font-mono:    'Space Mono', monospace;

  /* ── Typografie-Skala (DS v2.1 §3.2) ────── */
  --type-display-xl: 48px;   /* Hero-Zahlen, Level-Up-Screen        | 800 | Display | lh 1.1 */
  --type-display-lg: 32px;   /* Seitentitel, Stat-Werte              | 700 | Display | lh 1.1 */
  --type-display-md: 24px;   /* Abschnitts-Titel, Level-Name         | 700 | Display | lh 1.1 */
  --type-heading-lg: 20px;   /* Seiten-Überschriften                 | 600 | Body    | lh 1.3 */
  --type-heading-md: 16px;   /* Card-Titel, Modal-Titel              | 600 | Body    | lh 1.3 */
  --type-heading-sm: 14px;   /* Sub-Headings (nur mit weight 600)    | 600 | Body    | lh 1.3 */
  --type-body:       16px;   /* Standard-Text                        | 400 | Body    | lh 1.6 */
  --type-body-sm:    14px;   /* Sekundärer Text, Beschreibungen      | 400 | Body    | lh 1.6 */
  --type-caption:    12px;   /* Labels, Badges, Timestamps           | 500 | Mono    | lh 1.4 */
  --type-micro:      11px;   /* Section-Titles, Overlines            | 400 | Mono    | lh 1.4 */

  /* ═══════════════════════════════════════════════════════════
     Legacy-Aliase (breaking-safe, zeigen auf Design-System)
     DEPRECATED — schrittweise in F1 entfernen
     ═══════════════════════════════════════════════════════════ */

  /* Hintergründe */
  --bg:            var(--bg-void);
  --bg-card-hover: var(--bg-elevated);
  --bg-dark:       var(--bg-surface);

  /* Borders */
  --border:        var(--border-default);
  --border-light:  var(--border-strong);

  /* Farben */
  --purple:        var(--neon-violet);
  --purple-light:  var(--neon-violet);
  --purple-dark:   #6d28d9;

  /* Text */
  --cream:         var(--text-primary);
  --cream-muted:   var(--text-secondary);
  --text:          var(--text-secondary);
  --text-dim:      var(--text-secondary);
  --text-muted:    var(--text-tertiary);

  /* Status */
  --error:         var(--status-error);
  --success:       var(--status-success);
  --warning:       var(--status-warning);
  --info:          var(--status-info);

  /* Font-Size (DEPRECATED — use --type-* tokens instead) */
  --font-xs:       var(--type-caption);    /* was 12px → 11px (caption) */
  --font-sm:       var(--type-body-sm);    /* was 0.88rem → 13px */
  --font-base:     var(--type-body);       /* was 0.95rem → 15px */
  --font-lg:       var(--type-heading-lg); /* was 18px → 20px */
  --font-xl:       var(--type-display-md); /* was 21px → 24px */
}

/* ══════════════════════════════════════════════════════════
   Global Tooltip System (data-tooltip)
   Desktop: hover (JS-based, appended to body). Mobile: long-press (JS) / tap (info-tip)
   CSS pseudo-element tooltips removed in F5.7 — they clip inside overflow:hidden containers.
   All tooltip rendering is now handled by core.js (desktop hover + mobile long-press).
   ══════════════════════════════════════════════════════════ */
[data-tooltip] { position: relative; cursor: default; }
[data-tooltip]:not(.info-tip) { cursor: pointer; }

@keyframes tooltipFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ⓘ Info-tip icon (always visible, tap on mobile) */
.info-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: help;
  font-size: 11px;
  font-style: normal;
  color: var(--text-secondary);
  width: 16px;
  height: 16px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  margin-left: 5px;
  vertical-align: middle;
  flex-shrink: 0;
  transition: color 0.2s, border-color 0.2s;
}
.info-tip:hover {
  color: var(--neon-cyan);
  border-color: var(--neon-cyan);
}

/* Info-tip tooltip: rendered via JS body-appended overlay (F5.7)
   CSS pseudo-elements removed — they clip inside overflow:hidden.
   Desktop: hover. Mobile: tap toggle (.active class). */

/* Mobile tooltip overlay (added by JS for long-press) */
.tooltip-overlay {
  position: absolute;
  background: var(--bg-elevated);
  border: 1px solid var(--border-default);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  max-width: 260px;
  width: max-content;
  z-index: 9999;
  pointer-events: none;
  animation: tooltipFadeIn 0.15s ease;
}