/* StillFit design tokens. PLACEHOLDER values until Charlie's logo and colours arrive.
   Rules: large text, pictures first, never colour alone. Status colours always come
   with an icon shape and a word. No red/green pairs (Ian is colour-blind): blue means
   "done / fine", orange means "needs attention". */
:root {
  /* Brand */
  --sf-brand: #1f3a5f;            /* deep navy */
  --sf-brand-contrast: #ffffff;
  --sf-accent: #f2a541;           /* warm amber */

  /* Surfaces and text */
  --sf-bg: #ffffff;
  --sf-surface: #f3f5f8;
  --sf-text: #14181f;
  --sf-text-muted: #4a5361;       /* about 7.5:1 on --sf-bg */
  --sf-border: #c5ccd6;
  --sf-focus: #1a73e8;

  /* Status: always pair with an icon shape and a word */
  --sf-status-ok: #1a5fb4;        /* blue + tick + "Done" */
  --sf-status-attention: #c25e00; /* orange + triangle + "Check" */
  --sf-status-paused: #5e5e5e;    /* grey + pause bars + "Paused" */

  /* Type: large by default */
  --sf-font: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --sf-text-base: 1.25rem;        /* 20px */
  --sf-text-lg: 1.5rem;
  --sf-text-xl: 2rem;
  --sf-line: 1.5;

  /* Spacing and touch */
  --sf-space-1: 0.5rem;
  --sf-space-2: 1rem;
  --sf-space-3: 1.5rem;
  --sf-space-4: 2rem;
  --sf-gutter: 16px;
  --sf-tap: 48px;                 /* minimum touch target */
  --sf-radius: 12px;
}