/* =====================================================================
   Athletics Manager — shared stylesheet (single source of truth)
   ---------------------------------------------------------------------
   PHASE 1: loads the app font (Inter) once, defines the canonical design
   tokens, and sets base typography. Every page links this file.

   NOTE: individual pages still carry their own :root/colour rules for now.
   Those will be migrated onto these tokens in Phase 2 (with visual testing),
   at which point each page's local :root block can be removed.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root{
  /* ---------- Surfaces ---------- */
  --bg:#f5f7fb;
  --panel:#ffffff;
  --panel-strong:#ffffff;
  --card:#ffffff;
  --header:#0f172a;
  --dark:#0f172a;

  /* ---------- Lines / borders ---------- */
  --line:#dde5ef;
  --line-strong:#c6d0de;

  /* ---------- Text ---------- */
  --text:#0f172a;
  --muted:#64748b;

  /* ---------- Brand blue ---------- */
  --blue:#2563eb;
  --blue-dark:#1d4ed8;
  --blue-soft:#eff6ff;
  --blue-border:#bfdbfe;
  --blue-1:#eff6ff;
  --blue-2:#dbeafe;
  --blue-3:#93c5fd;
  --blue-4:#3b82f6;

  /* ---------- Success green ---------- */
  --green:#16a34a;
  --green-soft:#ecfdf5;
  --green-border:#a7f3d0;
  --green-1:#ecfdf5;
  --green-2:#d1fae5;
  --green-3:#a7f3d0;
  --green-4:#22c55e;

  /* ---------- Danger red ---------- */
  --red:#dc2626;
  --red-soft:#fef2f2;
  --red-border:#fecaca;
  --red-1:#fef2f2;
  --red-2:#fecaca;
  --red-3:#ef4444;

  /* ---------- Amber ---------- */
  --amber:#f59e0b;
  --amber-soft:#fffbeb;
  --amber-border:#fde68a;
  --amber-1:#fffbeb;
  --amber-2:#fde68a;
  --amber-3:#f59e0b;
  --amber-4:#d97706;

  /* ---------- Purple ---------- */
  --purple-soft:#f5f3ff;
  --purple-border:#ddd6fe;
  --purple-1:#f5f3ff;
  --purple-2:#ddd6fe;
  --purple-3:#8b5cf6;

  /* ---------- Neutral grey ---------- */
  --grey:#94a3b8;
  --grey-soft:#f8fafc;
  --grey-border:#d8e3ef;

  /* ---------- Table rows ---------- */
  --row-alt:#f8fafc;
  --row-alt-selected:#eff6ff;

  /* ---------- Shadows ---------- */
  --shadow-sm:0 4px 10px rgba(15,23,42,.05);
  --shadow-md:0 12px 28px rgba(15,23,42,.08);
  --shadow-lg:0 22px 44px rgba(15,23,42,.10);
  --shadow:0 22px 44px rgba(15,23,42,.10);
  --shadow-soft:0 14px 32px rgba(23,38,59,.12);

  /* ---------- Radius scale ---------- */
  --radius:22px;
  --radius-lg:22px;
  --radius-md:16px;
  --radius-sm:12px;

  /* ---------- Decorative gradients (track / field) ---------- */
  --track1:#1e63ff;
  --track2:#4db2ff;
  --trackGlow:rgba(30,99,255,.24);
  --field1:#159a63;
  --field2:#59d48f;
  --fieldGlow:rgba(21,154,99,.22);

  /* ---------- Motion ---------- */
  --speed:200ms ease;

  /* ---------- Runtime defaults (set inline by JS) ---------- */
  --x:0;
  --y:0;
  --start-scale:1;
  --reset-scale:1;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box; }

body{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Form controls inherit the app font instead of the browser default */
button, input, select, textarea{
  font-family:inherit;
}