/*
 * Design tokens. The four brand colours are replaced at run time with the
 * coach's colours from their Settings tab (see js/brand.js). Everything else
 * is derived from them, so one change re-skins the whole app.
 */
:root {
  /* Coach colours (defaults = Coaching Systems) */
  --brand: #9B0E1C;        /* Main colour: buttons, progress, highlights */
  --bg: #F9F4E4;           /* Background colour */
  --ink: #5B5043;          /* Text colour */
  --accent: #BFB6A6;       /* Accent colour: borders, quiet details */
  --on-brand: #FFFFFF;     /* Text on the main colour (worked out for contrast) */

  /* Derived */
  --surface: color-mix(in srgb, #FFFFFF 78%, var(--bg));
  --surface-2: color-mix(in srgb, var(--accent) 16%, var(--bg));
  --line: color-mix(in srgb, var(--accent) 70%, var(--bg));
  --line-strong: color-mix(in srgb, var(--ink) 45%, var(--bg));
  --ink-soft: color-mix(in srgb, var(--ink) 74%, var(--bg));
  --brand-soft: color-mix(in srgb, var(--brand) 10%, var(--surface));
  --brand-ring: color-mix(in srgb, var(--brand) 35%, transparent);
  --error: #B42318;
  --error-soft: #FDECEA;
  --ok: #2E7D4F;

  /* Type */
  --font-display: 'Source Serif 4', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-md: 1.0625rem;   /* 17px: inputs stay >= 16px so iPhones don't zoom */
  --text-lg: 1.25rem;
  --text-xl: 1.625rem;
  --text-2xl: 2.125rem;

  /* Space, shape, motion */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;
  --radius-sm: 10px;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 6px 20px -8px rgb(0 0 0 / 0.12);
  --shadow-lift: 0 2px 4px rgb(0 0 0 / 0.05), 0 14px 32px -12px rgb(0 0 0 / 0.22);
  --tap: 52px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 260ms;
  --page-max: 560px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
}