/* LockedIn Fitness — design tokens
   The console language (see styles/desktop-coach.css) is the brand source of
   truth. These tokens are the ONLY place raw color/size values may live;
   everything else references them. Enforced by tools/css-lint.mjs. */

:root {
  /* ---- signal (lime is signal, never decoration) ---- */
  --lime: #CCFF00;
  --lime-dim: #99cc00;
  --lime-hover: #d4ff33;
  --lime-glow: rgba(204, 255, 0, 0.25);
  /* named tint stops — the only permitted lime alphas */
  --lime-tint-strong: rgba(204, 255, 0, 0.18); /* borders, active fills */
  --lime-tint: rgba(204, 255, 0, 0.12);        /* chips, selected rows */
  --lime-tint-soft: rgba(204, 255, 0, 0.08);   /* hover washes */
  --lime-subtle: var(--lime-tint-soft);        /* legacy alias */
  --lime-border: var(--lime-tint-strong);      /* legacy alias */

  /* ---- surfaces (console elevation scale) ---- */
  --surface-0: #09090b;  /* page */
  --surface-1: #101012;  /* panel / sidebar */
  --surface-2: #131316;  /* card */
  --surface-3: #1C1C1E;  /* raised card / input */
  --surface-4: #2C2C2E;  /* hover / pressed */
  /* legacy aliases — migrate per view, then repoint to the surface scale */
  --bg-primary: #000000;
  --bg-secondary: #1C1C1E;
  --bg-tertiary: #2C2C2E;
  --bg-card: #1C1C1E;
  --bg-card-hover: #2C2C2E;

  /* ---- hairlines & borders ---- */
  --hairline: rgba(255, 255, 255, 0.07);
  --hairline-strong: rgba(255, 255, 255, 0.13);
  --fill-soft: rgba(255, 255, 255, 0.08);    /* neutral button/chip fill */
  --fill-medium: rgba(255, 255, 255, 0.15);  /* pressed neutral fill */
  --border-primary: rgba(84, 84, 88, 0.35);
  --border-accent: var(--lime-border);
  /* console aliases (desktop-coach.css re-declares these ≥1024px; same values) */
  --console-bg: var(--surface-0);
  --console-panel: var(--surface-1);
  --console-card: var(--surface-2);
  --console-hairline: var(--hairline);
  --console-hairline-strong: var(--hairline-strong);

  /* ---- text ---- */
  --text-primary: #FFFFFF;
  --text-secondary: rgba(235, 235, 245, 0.6);
  --text-tertiary: rgba(235, 235, 245, 0.3);
  --text-accent: var(--lime);
  --text-on-lime: #000000;

  /* ---- typography ---- */
  --font-display: -apple-system, 'SF Pro Display', BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --console-font: var(--font-display); /* Chakra Petch loads ≥1024px and overrides */
  /* type scale — the only permitted font sizes */
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --fs-3xl: 28px;
  --fs-display: 32px;
  /* legacy aliases */
  --font-size-body: 16px;
  --font-size-heading: 32px;
  --font-size-hero: 48px;

  --keyboard-height: 0px;

  /* ---- spacing ---- */
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;

  /* ---- radii ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  /* component radii (console) */
  --radius-control: 12px;  /* buttons, inputs */
  --radius-card: 14px;     /* cards, list panels */
  --radius-modal: 16px;    /* modal shells */
  --radius-pill: 999px;    /* chips, badges */

  /* ---- status ---- */
  --success: #22c55e;
  --warning: #eab308;
  --danger: #ef4444;
  --info: var(--lime);
  --success-tint: rgba(34, 197, 94, 0.15);
  --warning-tint: rgba(234, 179, 8, 0.15);
  --danger-tint: rgba(239, 68, 68, 0.15);

  /* ---- elevation ---- */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.6);
  --shadow-lime: 0 0 30px rgba(204, 255, 0, 0.1);

  /* ---- z-layers (never use raw z-index; add a layer here instead) ---- */
  --z-raised: 10;      /* sticky headers, in-view overlays */
  --z-nav: 100;        /* top bar, tab bar, sidebar */
  --z-modal: 200;      /* first-level modals */
  --z-modal-2: 300;    /* modals stacked over modals (workout builder) */
  --z-modal-3: 400;    /* pickers over stacked modals */
  --z-toast: 500;      /* toasts, always on top */
  --z-splash: 1000;    /* splash / boot screens */

  /* ---- motion ---- */
  --ease-spring: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-fast: 0.15s;
  --dur-base: 0.2s;

  --nav-height: 49px;
  --top-bar-height: 56px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
button, input, select, textarea { font-family: inherit; }

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  font-family: -apple-system, 'SF Pro Text', BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-weight: 400;
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Atmosphere — subtle radial gradient behind content */
body::before {
  content: '';
  position: fixed;
  top: -20%; left: -20%;
  width: 140%; height: 60%;
  background: radial-gradient(ellipse at 30% 0%, rgba(204,255,0,0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0; right: -10%;
  width: 60%; height: 40%;
  background: radial-gradient(ellipse at 80% 100%, rgba(204,255,0,0.015) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
}

body > * { position: relative; z-index: 1; }

/* Selection color */
::selection {
  background: var(--lime);
  color: #000;
}

/* Custom scrollbar */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--lime-border); border-radius: 2px; }

/* ========== LIQUID GLASS (iOS 26 style) ========== */
.glass {
  background: rgba(38, 38, 40, 0.55);
  backdrop-filter: blur(40px) saturate(1.6) brightness(1.1);
  -webkit-backdrop-filter: blur(40px) saturate(1.6) brightness(1.1);
  border: 0.5px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.06) inset, 0 4px 24px rgba(0,0,0,0.2);
}

/* Subtle press feedback on tappable glass cards (not modals/forms) */
.view-content > .glass,
.stat-card.glass,
.today-workout-card.glass {
  transition: transform 0.15s cubic-bezier(0.32, 0.72, 0, 1);
}

.view-content > .glass:active,
.stat-card.glass:active,
.today-workout-card.glass:active {
  transform: scale(0.98);
}