/* ──────────────────────────────────────────────────────────────
   Shared design system — Coach Manmeet × Pulkit
   Extracted from the daily tracker / plan pages so the dashboard
   and any future page share one source of truth.
   ────────────────────────────────────────────────────────────── */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --white:#FFFFFF;
  --page:#F6F5F2;
  --surface:#FFFFFF;
  --surface2:#F0EFEB;
  --ink:#1A2332;
  --ink2:#4A5568;
  --ink3:#8A94A0;
  --ink4:#C5CAD0;
  --orange:#E8622A;
  --orange-light:#FDF1EC;
  --orange-mid:#F5C4A8;
  --green:#2E7D52;
  --green-light:#EAF4EE;
  --amber:#B45309;
  --amber-light:#FEF3C7;
  --red:#C0392B;
  --red-light:#FDECEA;
  --blue:#1E5FA8;
  --blue-light:#EBF2FB;
  --border:#E4E2DC;
  --border2:#D0CEC8;
  --r:10px;
  --r-sm:7px;
  --shadow:0 1px 3px rgba(26,35,50,0.08),0 4px 12px rgba(26,35,50,0.05);
  --shadow-sm:0 1px 2px rgba(26,35,50,0.06);
}

html{scroll-behavior:smooth}
body{font-family:'DM Sans',sans-serif;background:var(--page);color:var(--ink);font-size:15px;line-height:1.65;-webkit-font-smoothing:antialiased}

/* ── Typography helpers ── */
.serif{font-family:'Playfair Display',serif}
.mono{font-family:'DM Mono',monospace}

/* ── Cards ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:1.5rem;box-shadow:var(--shadow-sm)}
.card-label{font-size:10px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink3);font-weight:600;margin-bottom:0.6rem}
.card-val{font-family:'DM Mono',monospace;font-size:2rem;font-weight:500;color:var(--ink);line-height:1}
.card-sub{font-size:12px;color:var(--ink3);margin-top:0.4rem;line-height:1.5}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:100px;letter-spacing:0.03em}
.badge-red{background:var(--red-light);color:var(--red);border:1px solid rgba(192,57,43,0.15)}
.badge-green{background:var(--green-light);color:var(--green);border:1px solid rgba(46,125,82,0.15)}
.badge-amber{background:var(--amber-light);color:var(--amber);border:1px solid rgba(180,83,9,0.15)}
.badge-blue{background:var(--blue-light);color:var(--blue);border:1px solid rgba(30,95,168,0.15)}
.badge-orange{background:var(--orange-light);color:var(--orange);border:1px solid var(--orange-mid)}
.badge-neutral{background:var(--surface2);color:var(--ink2);border:1px solid var(--border)}

/* ── Value colour states ── */
.is-good{color:var(--green)}
.is-warn{color:var(--amber)}
.is-bad{color:var(--red)}