/*
 * Design Tokens — the ONLY file that defines the visual brand.
 *
 * White-labeling: after login the JS injects
 *   <style id="__coachTheme">:root { --primary: #...; }</style>
 * overriding the defaults below. Coaches can change colors for light/dark,
 * sidebar, surfaces and statistic charts. Everything else inherits automatically
 * through the alias system at the bottom.
 *
 * To add a new coach theme: store a coach branding palette via the API.
 */

:root {
  /* ── Brand (coach-overridable) ──────────────────────────────── */
  --primary:    #df463d;   /* main accent — CTA buttons, active nav, borders */
  --secondary:  #2b7a50;   /* success / positive states */
  --sidebar-bg: #0e0e0e;   /* sidebar and login-art dark background */
  --bg:         #f2ede6;   /* page background (warm beige) */

  /* ── Surfaces ───────────────────────────────────────────────── */
  --panel:    #fffaf4;     /* panel / section background */
  --surface:  #ffffff;     /* card / input / elevated surface */

  /* ── Typography ─────────────────────────────────────────────── */
  --ink:   #151515;        /* primary text */
  --muted: #706b63;        /* secondary / hint text */
  --line:  #ddd6cc;        /* dividers, card borders */
  --font:  "Aptos", "Segoe UI", sans-serif;
  --chart-weight: #df463d;
  --chart-nutrition: #d8902f;
  --chart-activity: #2b7a50;
  --chart-recovery: #4f6fbf;

  /* ── Shape ──────────────────────────────────────────────────── */
  --radius-card: 14px;
  --radius-pill: 9999px;

  /* ── Shadows ────────────────────────────────────────────────── */
  --shadow-card:     0 2px 12px rgba(20,16,12,.06), 0 8px 32px rgba(20,16,12,.04);
  --shadow-modal:    0 32px 80px rgba(0,0,0,.5);
  --shadow-dropdown: 0 4px 12px rgba(0,0,0,.14);

  /* ── Ampel / traffic-light (performance indicators) ─────────── */
  --ampel-green:  #22c55e;
  --ampel-yellow: #eab308;
  --ampel-red:    #ef4444;
  --ampel-none:   #cbd5e1;

  /* ── Backward-compat aliases ────────────────────────────────── */
  /* Existing code uses --red, --green, --black — keep them as   */
  /* aliases so nothing breaks. Override the source tokens above. */
  --red:   var(--primary);
  --green: var(--secondary);
  --amber: var(--chart-nutrition);
  --black: var(--sidebar-bg);
}