/* TheLab — Design Tokens
 * Canonical token system from the redesign brief.
 * Apple-restraint chassis + Fitbod-warm accent.
 * Legacy aliases at the bottom keep existing shared.css selectors working
 * while the codebase transitions to the canonical names.
 */

:root {
  /* ── Colour: backgrounds (Lift-Off-grade restraint, BLC brand) ──── */
  --bg:          #0B0B0D;       /* near-black */
  --surface:     #141418;       /* cards */
  --surface-2:   #1C1C22;       /* elevated */
  --surface-3:   #26262E;       /* hairline-equivalent fills */
  --border:      #26262E;
  --border-strong: #3A3A47;

  /* ── Colour: text ────────────────────────────────────────────── */
  --text:   #F5F5F7;
  --text-2: #8A8A92;       /* muted */
  --text-3: #54545C;       /* faint */

  /* ── Colour: accents (BLC green pushed brighter for near-black) ── */
  --accent:        #A3E635;     /* working accent, BLC green family */
  --accent-strong: #BEF264;     /* hover / active */
  --accent-quiet:  rgba(163,230,53,0.12);
  --secondary:     #4F8CFF;     /* charts, links */

  /* ── Colour: semantic ────────────────────────────────────────── */
  --success: #5BE07E;
  --warning: #FFB037;
  --danger:  #FF5C5C;

  /* ── Colour: chart palette (qualitative, dark-bg-safe) ───────── */
  --c1: #FF6A3D;   /* primary metric */
  --c2: #4F8CFF;
  --c3: #2BD46B;
  --c4: #B388FF;
  --c5: #FFB020;
  --c6: #FF4D6D;

  /* ── Colour: muscle heatmap (light-to-deep green) ────────────── */
  --heat-0:   #a3e324;  /* 100% recovered (lightest) */
  --heat-25:  #87cd0b;
  --heat-50:  #6ba00a;
  --heat-75:  #4a7008;
  --heat-100: #2d4505;  /* fatigued (deepest) */

  /* ── Typography ──────────────────────────────────────────────── */
  --font-sans:    "Inter", "Inter Variable", system-ui, -apple-system, sans-serif;
  --font-display: "Inter Tight", "Inter", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", monospace;

  /* ── Type scale (16 px root) ─────────────────────────────────── */
  --t-display: 48px;   /* hero PR numbers */
  --t-h1:      32px;   /* page titles */
  --t-h2:      22px;   /* section headers */
  --t-h3:      17px;   /* card titles */
  --t-body-lg: 17px;
  --t-body:    15px;
  --t-caption: 13px;
  --t-label:   11px;   /* uppercase tracked labels */

  --w-regular: 400;
  --w-medium:  500;
  --w-semi:    600;
  --w-bold:    700;

  /* ── Spacing scale ───────────────────────────────────────────── */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 80px;

  /* ── Radius (continuous-curve approximated by larger values) ──── */
  --r-input: 10px;
  --r-card:  16px;
  --r-sheet: 28px;
  --r-pill:  9999px;

  /* ── Elevation (subtle lift + border, not shadow stacks) ──────── */
  --elev-0: 0 0 0 1px var(--border);
  --elev-1: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 0 0 1px var(--border);
  --elev-2: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 1px var(--border-strong);
  --elev-modal: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px var(--border-strong);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasis: cubic-bezier(0.32, 0.72, 0, 1);
  --d-fast: 120ms;
  --d-base: 200ms;
  --d-slow: 320ms;

  /* ── Layout ──────────────────────────────────────────────────── */
  --nav-height:        56px;
  --nav-safe-bottom:   calc(var(--nav-height) + env(safe-area-inset-bottom));
  --content-pad-bottom: calc(var(--nav-height) + 16px + env(safe-area-inset-bottom));

  /* ── Legacy aliases ──────────────────────────────────────────── *
   * Keeps existing shared.css + JS-injected templates working.
   * Migrate references to the canonical tokens above when touching code.
   */
  --bg2:           #101214;
  --card:          var(--surface);
  --bg-card:       var(--surface);
  --bg-card-hover: var(--surface-2);
  --border-soft:   #1c1c20;

  --text-2-legacy: var(--text-2);
  --muted:         var(--text-2);
  --dim:           var(--text-3);

  --accent-bright: var(--accent-strong);
  --accent-dim:    rgba(163,230,53,0.22);
  --accent-soft:   rgba(163,230,53,0.10);
  --on-accent:     #0B0B0D;

  /* The historic --purple alias maps to the brand accent. Do not introduce
   * new var(--purple) usage; use var(--accent) instead. */
  --purple:               var(--accent);
  --purple2:              var(--accent-strong);
  --brand-green:          #87cd0b;        /* BLC house colour, kept for non-app surfaces */
  --brand-green-light:    #a3e324;
  --brand-green-dim:      rgba(135,205,11,0.18);

  --blue:   var(--secondary);
  --teal:   #5fcdc8;
  --gold:   #e8b540;
  --orange: var(--accent);
  --red:    var(--danger);
  --green:  var(--success);

  /* Legacy spacing/radius aliases used by shared.css */
  --s1: var(--s-1);
  --s2: var(--s-2);
  --s3: var(--s-3);
  --s4: var(--s-4);
  --s5: var(--s-5);
  --s6: var(--s-6);
  --s7: var(--s-7);
  --s8: var(--s-8);

  --r1: 4px;
  --r2: 6px;
  --r3: 8px;
  --r4: var(--r-card);

  --ease:   var(--ease-standard);
  --dur-1:  var(--d-fast);
  --dur-2:  var(--d-base);

  --sidebar:           220px;
  --sidebar-collapsed: 0;
}

/* ── Numerical alignment everywhere data lives ───────────────────── */
.tnum,
.card-value, .card-sub, .pr-hero-rm, .pr-hero-sub, .pr-hero-meta,
.strength-pr, .strength-ratio, .score-number, .streak-num,
.ldr-rank, .ldr-count, .rank-name, .rank-lp,
.allex-card-1rm, .allex-list-item-rm, .allex-list-item-sub,
.td-num, input[type=number], .recent-date, .session-date,
.stat-val, .cal-day, .badge-need, .badge-date,
.perf-streak-card .streak-num, .allex-card-stat .val,
.allex-list-detail .stat .val, .log-card-stat strong,
.top-ex-rank, .overall-rank-text, .modal-set-row,
.session-ex-table, .strength-level-badge, .podium-rm, .podium-count {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* ── Utility classes (keeps inline styles out of HTML/JS) ───────── */
.is-clickable { cursor: pointer; }
.text-muted   { color: var(--text-2); }
.text-dim     { color: var(--text-3); }
.text-accent  { color: var(--accent); }
.text-success { color: var(--success); }
.text-warning { color: var(--warning); }
.text-danger  { color: var(--danger); }

.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-1 { margin-bottom: var(--s-1); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.mb-6 { margin-bottom: var(--s-6); }

.flex-row    { display: flex; }
.flex-col    { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between{ display: flex; align-items: center; justify-content: space-between; }
.flex-1      { flex: 1; min-width: 0; }
.flex-shrink-0 { flex-shrink: 0; }

/* ── Phosphor icon hygiene ──────────────────────────────────────── */
i.ph, i.ph-bold, i.ph-fill, i.ph-duotone {
  font-size: 1.05em;
  line-height: 1;
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ph-icon-lg { font-size: 22px; }
.ph-icon-md { font-size: 18px; }
.ph-icon-sm { font-size: 14px; }

/* Tap-target floor — every interactive element ≥ 44px high on touch */
@media (hover: none) and (pointer: coarse) {
  button, .btn, a.btn, .bnav-item, .strength-pill, .coaching-pill, .lb-pill,
  .allex-freq-pill, .rec-pill, .range-btn, .sort-btn, .view-btn, .ep-pill,
  .profile-action-btn, .ai-btn {
    min-height: 44px;
  }
}