/* KOACH-BUILD-STAMP: S332-B3-TOKENS */
/*
 * koach-tokens.css -- THE ONE PLACE FOR EVERY DESIGN VALUE (S332, owner 2026-10-22 16:36 local:
 * "universal design files ... so that it would be easy to make any changes needed").
 *
 * Change a value here and every page that uses it follows: koach-components.css (the shared pieces) and
 * koach-light.css (page rules) read these tokens and should never hard-code a colour, line, size or space.
 * Governing standard: claude/koach-design-quality-checklist-v2.md (rulings R1-R3, sections A-N) and the app-page
 * design standard. Loaded first, on every page that loads koach-light.css (koach_light_enqueue()).
 * Scoped to :root so the menus (shell) and every light page read the same values; nothing here styles an element.
 * ASCII only. Lowercase koach.
 */
:root {
  /* ---- text ---- */
  --kl-ink: #21252E;            /* body text, titles */
  --kl-ink2: #4A515F;           /* secondary text (7:1 on white) */
  --kl-quiet: #5F6673;          /* quiet text, rest days (5.8:1) */
  --kl-placeholder: #6B7280;
  --kl-inactive: #8A909C;       /* a disabled control's label ONLY, never readable text */
  --kl-on-dark: #FFFFFF;

  /* ---- the one accent: ACTION ONLY (R3) -- buttons, selections, the current menu item ---- */
  --kl-red: #C0161C;
  --kl-red-press: #9B1116;
  --kl-sel-bg: #FCECEC;         /* a selected answer / scale value: red edge + this tint */

  /* ---- meaning colours (text on white) ---- */
  --kl-ok: #076E4C;
  --kl-attn: #8A5300;
  --kl-phase: #179BA3;
  --kl-phase-tx: #0B5F66;

  /* ---- status chips (R3: a word + an icon, never red) ---- */
  --kl-st-block-bg: #21252E;  --kl-st-block-tx: #FFFFFF;   /* blocks training / critical */
  --kl-st-attn-bg: #FFF4E0;   --kl-st-attn-tx: #8A5300;    /* needs action / due / not finished */
  --kl-st-ok-bg: #E3F4EC;     --kl-st-ok-tx: #076E4C;      /* on track / booked / done */
  --kl-st-info-bg: #E5F4F5;   --kl-st-info-tx: #0B5F66;    /* phase, informational */
  --kl-st-neutral-bg: #EFF1F4; --kl-st-neutral-tx: #4A515F;/* neutral tag */
  --kl-badge-bg: #21252E;     --kl-badge-tx: #FFFFFF;      /* counts (Alerts 3) */

  /* ---- surfaces ---- */
  --kl-page: #FFFFFF;           /* every page is white (R1) */
  --kl-band: #EEF1F5;           /* the grey band BETWEEN sections, the only grey on a page (R1) */
  --kl-band-h: 8px;
  --kl-ctrl-bg: #FFFFFF;        /* fill of fields, secondary buttons, scale buttons, answer cards (R2) */
  --kl-ctrl: #EFF1F4;           /* tracks (progress bars), neutral chips, segmented-control well */
  --kl-soft: #F3F5F9;           /* inset note (koach's note), today's row, picture box */
  --kl-menu-bg: #F3F5F9;        /* desktop left menu + phone bottom bar (D621, owner 16:12) */
  --kl-bar: #161B24;            /* top bar */
  --kl-av-dark: #2C323C;
  --kl-pic: #FDFDFD;
  --kl-open: #FAFBFC;
  --kl-offline-bg: #FFF7E8; --kl-offline-line: #E8C98F;
  --kl-error-bg: #FCEBEA;   --kl-error-line: #E8A9A6;

  /* ---- lines ---- */
  --kl-line-ctrl: #858E9E;      /* the edge of every control: 3.3:1 on white (WCAG 1.4.11, R2) */
  --kl-w-ctrl: 1.5px;           /* its width */
  --kl-line-row: #D3D9E2;       /* row dividers inside a section (visible, R1) */
  --kl-line-section: #D3D9E2;   /* a heading rule / table header edge */
  --kl-line-menu: #D3D9E2;      /* menu edge against the page */
  --kl-line-role: #DCE1E9;
  --kl-line-bar: #ECEEF1;
  --kl-line-bubble: #E2E6EC;

  /* ---- canfitpro role dots ---- */
  --kl-role-mobility: #E9A3C5;
  --kl-role-stability: #E9A3C5;
  --kl-role-main: #F0509E;
  --kl-role-supplemental: #CE2384;
  --kl-role-accessory: #9E1568;
  --kl-role-finish: #63103F;

  /* ---- radii ---- */
  --kl-r-field: 12px;
  --kl-r-btn: 14px;
  --kl-r-seg: 11px;
  --kl-r-chip: 999px;

  /* ---- heights ---- */
  --kl-h-bottom: 72px;
  --kl-h-top: 56px;
  --kl-h-primary: 54px;
  --kl-h-secondary: 48px;
  --kl-h-tap: 44px;
  --kl-h-row: 52px;             /* a list row */
  --kl-h-row-lg: 72px;          /* a client / person row */
  --kl-h-chip: 28px;

  /* ---- shadows (primary button only; no card shadows, R1) ---- */
  --kl-sh-primary: 0 4px 12px -4px rgba(192,22,28,.45);
  --kl-sh-float: 0 6px 16px rgba(16,24,40,.16);
  --kl-sh-seg: 0 1px 3px rgba(16,24,40,.14);

  /* ---- spacing (D644 levels; phone values, desktop below) ---- */
  --kl-side: 20px;              /* page side gutter on a phone */
  --kl-section: 24px;
  --kl-role-gap: 28px;
  --kl-sec-pad: 24px;           /* top and bottom padding of a section, between its bands (R1) */
  --kl-sp-section: 48px;        /* legacy: space between sections where no band is used */
  --kl-sp-sub: 32px;            /* between groups inside a section */
  --kl-sp-head: 16px;           /* under a heading, before its content */
  --kl-sp-item: 12px;           /* between items of one group */
  --kl-col: 960px;              /* desktop content column */

  /* ---- type ---- */
  --kl-font: 'DM Sans', system-ui, sans-serif;
  --kl-title-font: 'Bebas Neue', sans-serif;
  --kl-fs-body: 15px;
  --kl-fs-small: 14px;          /* helpers, captions, dates (12px floor) */
  --kl-fs-chip: 13px;
  --kl-fs-h2: 20px;
  --kl-fs-h3: 17px;
  --kl-fs-title: 40px;
}
@media (min-width: 821px) {
  :root { --kl-sec-pad: 40px; --kl-sp-section: 64px; --kl-sp-sub: 40px; --kl-sp-head: 16px; --kl-sp-item: 16px; }
}