/* ============================================================================
   ASF COACH INTERFACE — DESIGN TOKENS
   Brand: Adrenaline Sports & Fitness · Black + Red + Forge/Smithy
   Single source of truth for color, type, space, radius, elevation, motion.
   Two themes share one DNA:
     .theme-floor  → dark "iron forge"   (gym-floor capture, phone, glanceable)
     .theme-office → light "forged steel" (office/admin review, desktop, calm)
   Lift this file directly into the build. Reference tokens by var(); never
   hard-code a hex. Brand red is the primary ACTION color; semantic green
   stays for CONFIRMED/SAVED — universal signal. Distinct, deliberate.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------- */
/* B4-9: self-hosted. The remote @import was render-blocking, so a
   fonts.googleapis.com that HANGS (rather than fails) left the floor blank
   until the browser gave up. Same families, weights and subsets as before
   (latin + latin-ext); fonts.css says where they came from. */
@import url('fonts.css');

:root {
  /* ---- Type families ---- */
  --font-display: 'Barlow Condensed', system-ui, sans-serif; /* big numbers, headings, exercise names */
  --font-ui:      'Barlow', system-ui, sans-serif;            /* body, labels, all UI text */
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;   /* units, status, IDs, timestamps */

  /* ---- Type scale (px) ---- */
  --t-micro: 11px;  /* mono micro-labels */
  --t-cap:   13px;  /* captions, helper text */
  --t-sm:    15px;  /* secondary UI */
  --t-base:  17px;  /* body / default control text */
  --t-md:    20px;  /* list headline value */
  --t-lg:    26px;  /* screen titles */
  --t-xl:    34px;  /* section heroes */
  --t-2xl:   48px;  /* big metric numbers */
  --t-3xl:   72px;  /* the dominant captured value on the floor */

  --lh-tight: 1.02;
  --lh-snug:  1.22;
  --lh-body:  1.5;

  /* ---- Weights ---- */
  --w-reg: 400; --w-med: 500; --w-semi: 600; --w-bold: 700; --w-black: 800;

  /* ---- Spacing (4px base) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 48px; --s-10: 64px; --s-12: 96px;

  /* ---- Radius ---- */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 999px;

  /* ---- Touch targets (floor is non-negotiable) ---- */
  --tap-min: 48px;
  --tap-floor: 60px;
  --tap-primary: 76px;

  /* ---- Semantic status hues ---- */
  /* Brand red = action/primary — NOT saved (that stays green, universal signal) */
  --brand-h:   27;  /* Adrenaline red — primary actions */
  --go-h:     148;  /* confirmed / saved — universal green */
  --pending-h: 70;  /* pending / caution — forge ember amber */
  --info-h:   212;  /* new / unreconciled — cold steel blue */
  --stop-h:    18;  /* destructive / stuck — deep red (darker than brand) */

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-mid:  200ms;
  --dur-slow: 320ms;
}

/* ============================================================================
   FLOOR THEME — iron forge
   Black iron, red fire, forge-floor energy.
   ========================================================================== */
.theme-floor {
  color-scheme: dark;

  --bg:        oklch(0.11 0.006 27);   /* carbon-black with barely-there warm tint */
  --bg-deep:   oklch(0.08 0.005 27);
  --surface:   oklch(0.16 0.007 27);
  --surface-2: oklch(0.20 0.008 27);
  --surface-3: oklch(0.25 0.009 27);
  --border:    oklch(0.30 0.009 27);
  --border-strong: oklch(0.40 0.01 27);

  --text-hi:  oklch(0.97 0.002 65);   /* near-white with warmth */
  --text-mid: oklch(0.72 0.006 27);
  --text-lo:  oklch(0.50 0.006 27);

  /* Brand red accent — primary action (SAVE button, primary button) */
  --accent:        oklch(0.56 0.22 var(--brand-h));
  --accent-strong: oklch(0.50 0.23 var(--brand-h));
  --accent-soft:   oklch(0.56 0.22 var(--brand-h) / 0.16);
  --on-accent:     oklch(0.99 0.002 65); /* white text on red */

  /* Semantic status */
  --go:      oklch(0.76 0.16 var(--go-h));
  --go-soft: oklch(0.76 0.16 var(--go-h) / 0.16);
  --pending: oklch(0.80 0.15 var(--pending-h));
  --pending-soft: oklch(0.80 0.15 var(--pending-h) / 0.16);
  --info:    oklch(0.70 0.12 var(--info-h));
  --info-soft: oklch(0.70 0.12 var(--info-h) / 0.16);
  --stop:    oklch(0.60 0.22 var(--stop-h));
  --stop-soft: oklch(0.60 0.22 var(--stop-h) / 0.16);

  --shadow-1: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 2px 8px oklch(0 0 0 / 0.5);
  --shadow-2: 0 1px 0 oklch(1 0 0 / 0.05) inset, 0 8px 28px oklch(0 0 0 / 0.65);
  --glow-accent: 0 0 0 1px oklch(0.56 0.22 var(--brand-h) / 0.45), 0 6px 28px oklch(0.56 0.22 var(--brand-h) / 0.32);
  --glow-stop:   0 0 0 1px oklch(0.60 0.22 var(--stop-h) / 0.5), 0 6px 28px oklch(0.60 0.22 var(--stop-h) / 0.3);
}

/* ============================================================================
   OFFICE THEME — forged steel (light)
   Warm paper-white, clean lines, red accent.
   ========================================================================== */
.theme-office {
  color-scheme: light;

  --bg:        oklch(0.981 0.006 68);  /* warm paper — forge-shop notes */
  --bg-deep:   oklch(0.962 0.007 68);
  --surface:   oklch(1 0 0);
  --surface-2: oklch(0.982 0.005 68);
  --surface-3: oklch(0.963 0.006 68);
  --border:    oklch(0.905 0.006 68);
  --border-strong: oklch(0.840 0.007 68);

  --text-hi:  oklch(0.18 0.008 27);   /* near-black with warm undertone */
  --text-mid: oklch(0.44 0.008 27);
  --text-lo:  oklch(0.60 0.006 27);

  /* Brand red — refined for light context */
  --accent:        oklch(0.50 0.22 var(--brand-h));
  --accent-strong: oklch(0.44 0.24 var(--brand-h));
  --accent-soft:   oklch(0.50 0.22 var(--brand-h) / 0.10);
  --on-accent:     oklch(0.99 0.002 65);

  --go:      oklch(0.52 0.14 var(--go-h));
  --go-soft: oklch(0.52 0.14 var(--go-h) / 0.12);
  --pending: oklch(0.56 0.13 var(--pending-h));
  --pending-soft: oklch(0.56 0.13 var(--pending-h) / 0.13);
  --info:    oklch(0.50 0.13 var(--info-h));
  --info-soft: oklch(0.50 0.13 var(--info-h) / 0.11);
  --stop:    oklch(0.50 0.22 var(--stop-h));
  --stop-soft: oklch(0.50 0.22 var(--stop-h) / 0.10);

  --shadow-1: 0 1px 2px oklch(0.15 0.01 27 / 0.07), 0 1px 1px oklch(0.15 0.01 27 / 0.04);
  --shadow-2: 0 2px 4px oklch(0.15 0.01 27 / 0.06), 0 12px 28px oklch(0.15 0.01 27 / 0.11);
  --glow-accent: 0 1px 3px oklch(0.44 0.24 var(--brand-h) / 0.35);
  --glow-stop:   0 1px 3px oklch(0.50 0.22 var(--stop-h) / 0.3);
}

/* ============================================================================
   PRIMITIVES
   ========================================================================== */
* { box-sizing: border-box; }
/* app-shell lock: the document itself never scrolls — only designated inner
   scrollers (.floor-body, .auth-stage) do. Without this, mobile browsers give
   the page URL-bar slack + default body margin, and scrolling slides the whole
   shell including the bottom nav (BUG-015). */
html, body { height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
.asf-reset {
  margin: 0; font-family: var(--font-ui); font-size: var(--t-base);
  line-height: var(--lh-body); color: var(--text-hi); background: var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.mono    { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.num     { font-family: var(--font-display); font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums; }
.display { font-family: var(--font-display); letter-spacing: 0.01em; }
.tnum    { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}