/*
  Design tokens only — no component rules here. app.css must reference the semantic tokens
  below (--bg, --text, --accent, etc.), never --cycle-* or a raw hex, so that retheming is a
  single-block edit here and nothing else needs to change.

  Sourced from the Terlo Brand & Style Guidelines (Outline: brand-style-guidelines-91LKdwgIec).
  See MEMORY.md / reference_brand_style_guidelines.md — check that doc before changing these
  values, this file should stay in sync with it rather than drift on its own judgement calls.
*/

:root {
  /* ── The five Terlo cycle colours (from the device mark) — one per cycle stage. ───────── */
  /* --cycle-blue corrected 9 Sept 2026 from #02AFEB to #2545FF to match the colour actually
     baked into terlo-logo.svg's figure 1 — see Brand & Style Guidelines §2/§3/§11 (the logo
     asset vs. token mismatch, and the primary-CTA-colour decision were the same root cause). */
  --cycle-blue:      #2545FF; /* ① Sensors Deployed — primary interactive colour */
  --cycle-purple:    #BF56AD; /* ② Usage Analysed */
  --cycle-amber:     #F8AD1C; /* ③ Pathway Set Up */
  --cycle-coral:     #FE5633; /* ④ Training Delivered */
  --cycle-lime:      #A5CE16; /* ⑤ Competency Updated */

  /* ── Semantic tokens — everything in app.css should be built from these. ──────────────── */
  --bg:              #FFFFFF; /* warm white */
  --bg-alt:          #F7F4F0; /* warm off-white — section differentiation */
  --bg-dark:         #241F1C; /* warm dark ground — used sparingly, one section max per page */
  --surface:         #FFFFFF;
  --border:          #E8E2DA; /* warm-toned border/divider */

  --text:            #333333; /* ink — matches the wordmark exactly */
  --text-muted:      #5C5652; /* ink soft */
  --text-on-accent:  #FFFFFF;
  --text-on-dark:    #FFFFFF;
  --text-on-dark-muted: #E8DFD6; /* warm light neutral, not pure white */

  --accent:          var(--cycle-blue); /* primary interactive: buttons, links, active states */
  --accent-hover:    #1B33CC; /* darkened indigo */
  --accent-muted:    rgba(37, 69, 255, 0.10);
  --accent-2:        var(--cycle-amber); /* secondary accent */
  --accent-2-muted:  rgba(248, 173, 28, 0.12);

  --eyebrow-on-light: var(--cycle-coral);
  --eyebrow-on-dark:  var(--cycle-amber); /* coral is harder to read on the dark ground at small sizes */

  --positive:        var(--cycle-lime);
  --warn:            var(--cycle-amber);
  --danger:          var(--cycle-coral);
  --highlight:       var(--cycle-purple);

  --font-display:    'Manrope', system-ui, -apple-system, sans-serif; /* headlines */
  --font-body:       'Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; /* body copy */
  --font:            var(--font-body);

  --max-w:           1200px;
  --radius:          16px; /* cards and buttons, per style guide — matches the device mark's rounded figures */
  --radius-lg:       16px;
}