/*
 * OneCoach design tokens — the single source of colour, type, spacing, radius,
 * elevation and motion. Components style through these variables only.
 * Sporty/energetic direction; light + dark themes given equal care.
 * Visual source of truth: openspec/changes/redesign-web-ui/mockup.html
 */
:root {
  /* palette — light */
  --page-bg: #E9EEFA;
  --app-bg: #F4F7FF;
  --surface: #FFFFFF;
  --surface-2: #EAF0FF;
  --line: rgba(16, 26, 54, .10);
  --text: #0B1230;
  --text-dim: #5A668B;

  --brand: #2F63FF;      /* structure, links, active nav, primary actions */
  --brand-2: #5A86FF;
  --on-brand: #FFFFFF;

  --energy-a: #FF5A3C;   /* motivational moments only */
  --energy-b: #FF2E7E;

  --easy: #0FB88E;       /* zone semantics — training intensity only */
  --mod: #F0980E;
  --hard: #FB4268;

  --track: rgba(16, 26, 54, .12);
  --shadow: 0 14px 34px rgba(20, 32, 72, .12);
  --shadow-sm: 0 6px 16px rgba(20, 32, 72, .10);

  /* gradients */
  --grad-energy: linear-gradient(135deg, #FF5A3C 0%, #FF2E7E 100%);
  --grad-brand: linear-gradient(135deg, #2F63FF 0%, #56A8FF 100%);

  /* radius / spacing / type */
  --r-lg: 26px;
  --r-md: 18px;
  --r-sm: 12px;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --header-h: 62px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --page-bg: #05070F;
    --app-bg: #0A0F1E;
    --surface: #121A2E;
    --surface-2: #1A2440;
    --line: rgba(255, 255, 255, .09);
    --text: #EAF1FF;
    --text-dim: #93A1C6;
    --brand: #4C7DFF;
    --brand-2: #82A6FF;
    --energy-a: #FF6A46;
    --energy-b: #FF3B87;
    --easy: #17CE9E;
    --mod: #FFB43A;
    --hard: #FF5B7C;
    --track: rgba(255, 255, 255, .11);
    --shadow: 0 20px 44px rgba(0, 0, 0, .5);
    --shadow-sm: 0 8px 20px rgba(0, 0, 0, .4);
    --grad-brand: linear-gradient(135deg, #4C7DFF 0%, #82C0FF 100%);
  }
}

/* Explicit host/user selection wins over the OS preference, both directions. */
:root[data-theme="light"] {
  --page-bg: #E9EEFA; --app-bg: #F4F7FF; --surface: #FFFFFF; --surface-2: #EAF0FF;
  --line: rgba(16, 26, 54, .10); --text: #0B1230; --text-dim: #5A668B;
  --brand: #2F63FF; --brand-2: #5A86FF; --energy-a: #FF5A3C; --energy-b: #FF2E7E;
  --easy: #0FB88E; --mod: #F0980E; --hard: #FB4268; --track: rgba(16, 26, 54, .12);
  --shadow: 0 14px 34px rgba(20, 32, 72, .12); --shadow-sm: 0 6px 16px rgba(20, 32, 72, .10);
  --grad-brand: linear-gradient(135deg, #2F63FF 0%, #56A8FF 100%);
}
:root[data-theme="dark"] {
  --page-bg: #05070F; --app-bg: #0A0F1E; --surface: #121A2E; --surface-2: #1A2440;
  --line: rgba(255, 255, 255, .09); --text: #EAF1FF; --text-dim: #93A1C6;
  --brand: #4C7DFF; --brand-2: #82A6FF; --energy-a: #FF6A46; --energy-b: #FF3B87;
  --easy: #17CE9E; --mod: #FFB43A; --hard: #FF5B7C; --track: rgba(255, 255, 255, .11);
  --shadow: 0 20px 44px rgba(0, 0, 0, .5); --shadow-sm: 0 8px 20px rgba(0, 0, 0, .4);
  --grad-brand: linear-gradient(135deg, #4C7DFF 0%, #82C0FF 100%);
}