/* ═══════════════════════════════════════════════════
   NextPercent Hub — Shared Base Styles
   Geladen via <link rel="stylesheet" href="/hub.css?v=3">
   Modulspezifische Styles bleiben inline im jeweiligen HTML.
═══════════════════════════════════════════════════ */

/* Reset — identisch in allen Modulen */
*{margin:0;padding:0;box-sizing:border-box}

/* Font-Baseline — Poppins für alle Module.
   Module können Body-Rule weiter ergänzen (background, height, font-size etc.). */
body{font-family:'Poppins',sans-serif}

/* Design-Tokens — kanonische Namen.
   Module dürfen lokal überschreiben, aber nicht neue Farbwerte erfinden. */
:root{
  /* Dunkle Grün-Palette (Sidebar, dunkle Flächen) */
  --dark:#0a0f0d;
  --g-dark:#0a3526;
  --g-mid:#0F4C35;
  --g-accent:#1a6647;
  --g-bright:#3ddc84;
  --g-dim:rgba(61,220,132,.12);

  /* Flächen */
  --white:#fff;
  --off:#f7f9f8;
  --hv:#fafafa;

  /* Text */
  --text:#111827;
  --text-light:#374151;
  --gray:#6b7280;

  /* Rahmen */
  --border:#e5e7eb;
  --border-dark:rgba(255,255,255,.08);

  /* Status-Farben */
  --amber:#f59e0b;
  --blue:#3b82f6;
  --red:#ef4444;

  /* ─── Alias-Set für Altcode (index.html, freelancer-hub.html) ───
     Wird von applyTheme() in index.html auch per JS gesetzt;
     hier als statischer Fallback damit Seiten ohne applyTheme() funktionieren. */
  --ac:var(--g-bright);
  --at:var(--text);
  --bg:var(--off);
  --bg2:var(--white);
  --bd:var(--border);
  --bs:var(--border);
  --ib:var(--off);
  --hv2:var(--hv);
  --lb:var(--gray);
  --tx:var(--text);
  --ts:var(--text-light);
  --tm:var(--gray);
  --w:var(--amber);
  --d:var(--red);
}

/* ─── Button-Varianten ───
   Basis (.btn) bleibt pro Modul inline, weil Groessen variieren
   (projects/tasks/client-onboarding haben eine Variante, cost-tracker eine andere).
   Nur die Varianten hier. */
.btn-primary{background:var(--g-bright);color:var(--dark)}
.btn-primary:hover{opacity:.88}
.btn-ghost{background:transparent;border:1.5px solid var(--border);color:var(--gray)}
.btn-ghost:hover{border-color:var(--text);color:var(--text)}
.btn-danger{background:rgba(239,68,68,.1);color:var(--red);border:1px solid rgba(239,68,68,.2)}
.btn-danger:hover{background:rgba(239,68,68,.15)}
.btn-dark{background:var(--g-dark);color:#fff}
.btn-dark:hover{background:var(--g-mid)}