/* ==========================================================================
   MOTA Design System — tokens
   Extracted from mota-app/lib/theme.tsx. Dark-first; light mode opt-in.
   ========================================================================== */

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

:root {
  /* ---------- Palette: Dark (default) ---------- */
  --bg-base:          #0A0A0F;
  --bg-card:          #141419;
  --bg-card-hover:    #1A1A22;
  --bg-elevated:      #1E1E28;

  --text-primary:     #F5F5F7;
  --text-secondary:   #A1A1AA;
  --text-muted:       #6B7280;

  --accent-green:     #00D46A; /* brand — signal green */
  --accent-blue:      #60A5FA; /* swim */
  --accent-orange:    #F97316; /* bike / high */
  --accent-yellow:    #FBBF24; /* caution */
  --accent-red:       #F87171; /* risk */
  --accent-purple:    #A78BFA; /* strength */
  --accent-neutral:   #6B7280; /* rest / recovery */

  --border:           rgba(255,255,255,0.08);
  --border-active:    rgba(255,255,255,0.15);

  /* Tinted fills (used for status cards like the morning check-in confirmation) */
  --tint-green-bg:    rgba(0,212,106,0.08);
  --tint-green-br:    rgba(0,212,106,0.20);

  /* ---------- Typography ---------- */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, Menlo, monospace;

  /* Scale (matches app values) */
  --fs-10: 10px; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px;
  --fs-14: 14px; --fs-15: 15px; --fs-16: 16px; --fs-18: 18px;
  --fs-20: 20px; --fs-22: 22px; --fs-24: 24px; --fs-56: 56px;

  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
  --fw-bold: 700;    --fw-heavy:   800;

  /* Tracking */
  --track-tight:   -0.3px;
  --track-title:   -0.5px;
  --track-normal:    0px;
  --track-label:     1px;
  --track-section:   2px;
  --track-hero:      3px;

  /* ---------- Spacing ---------- */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px;

  /* ---------- Radii ---------- */
  --radius-sm: 7px;   /* half-pill bars */
  --radius-md: 8px;   /* chips */
  --radius-lg: 10px;  /* inner segment */
  --radius-xl: 12px;  /* buttons, rows */
  --radius-2xl: 14px; /* stat rows */
  --radius-3xl: 16px; /* cards, modals */
  --radius-full: 999px;

  /* ---------- Shadows ---------- */
  --shadow-card:   0 2px 6px rgba(0,0,0,0.15);
  --shadow-fab:    0 4px 12px rgba(0,212,106,0.35);
  --shadow-glow:   0 0 8px rgba(0,212,106,0.50);

  /* ---------- Motion ---------- */
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-inout:     cubic-bezier(0.42, 0, 0.58, 1);
  --dur-fast:   160ms;
  --dur-base:   600ms;  /* bar chart reveal */
  --dur-pulse:  1200ms; /* today-row glow */
  --dur-breath: 1500ms; /* race countdown */
}

/* ---------- Palette: Light ---------- */
[data-theme='light'] {
  --bg-base:          #F5F5F7;
  --bg-card:          #FFFFFF;
  --bg-card-hover:    #F0F0F5;
  --bg-elevated:      #FFFFFF;

  --text-primary:     #1A1A1A;
  --text-secondary:   #52525B;
  --text-muted:       #71717A;

  --accent-green:     #16A34A;
  --accent-blue:      #2563EB;
  --accent-orange:    #EA580C;
  --accent-yellow:    #D97706;
  --accent-red:       #DC2626;

  --border:           rgba(0,0,0,0.08);
  --border-active:    rgba(0,0,0,0.15);
}

/* ==========================================================================
   Semantic text styles
   ========================================================================== */

.mota-hero-numeral {
  font-family: var(--font-sans);
  font-size: var(--fs-56);
  font-weight: var(--fw-heavy);
  letter-spacing: var(--track-title);
  color: var(--text-primary);
  line-height: 1;
}

.mota-title {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
}

.mota-greeting {
  font-family: var(--font-sans);
  font-size: var(--fs-22);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-tight);
  color: var(--text-primary);
}

.mota-value { /* stat numerals */
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.mota-card-heading {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.mota-body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
  line-height: 1.4;
  color: var(--text-primary);
}

.mota-body-muted {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.4;
  color: var(--text-secondary);
}

.mota-meta {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
}

.mota-section-label { /* e.g. TODAY'S MISSION */
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: var(--text-muted);
}

.mota-gauge-label {
  font-family: var(--font-sans);
  font-size: var(--fs-11);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--text-secondary);
}

.mota-unit {
  font-family: var(--font-sans);
  font-size: var(--fs-10);
  font-weight: var(--fw-medium);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.mota-cta { /* LET'S GO, START WORKOUT */
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-section);
  text-transform: uppercase;
  color: #0A0A0F;
}

.mota-status-hud { /* LOCKED IN, BATTLE MODE */
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-hero);
  text-transform: uppercase;
}

.mota-mono {
  font-family: var(--font-mono);
  font-size: var(--fs-13);
  color: var(--text-secondary);
}