/* SOS Coach design tokens for the web.
 *
 * Mechanically derived from brand/colors.ts (the app's canonical source).
 * If a colour changes in the app, change it there first, then mirror it here.
 *
 * Nothing in this file is a new design decision — the spacing and radius values
 * below are conventions observed in the app, not a formal scale that existed
 * before. See HANDOFF.md §3.
 */

:root {
  /* ---- Surfaces ---- */
  --sos-bg: #07090c;          /* app background, near-black */
  --sos-panel: #10141a;       /* cards / panels */
  --sos-panel-soft: #151b22;  /* raised panel */
  --sos-panel-deep: #080b0f;  /* recessed panel */
  --sos-line: #26303a;        /* borders, dividers */
  --sos-line-bright: #3fff88;

  /* ---- Brand ---- */
  --sos-green: #3fff88;       /* PRIMARY: SOS, success, hero accent */
  --sos-green-deep: #072817;  /* fill behind active chips */
  --sos-cyan: #2dd4ff;        /* secondary: coach voice, info */

  /* ---- Status ---- */
  --sos-orange: #ff6b2b;      /* slip / destructive */
  --sos-yellow: #ffd166;      /* warning */
  --sos-yellow-neon: #f5d94b; /* highest rank tier */
  --sos-purple: #b983ff;      /* rank tier 4 */

  /* ---- Text ---- */
  --sos-white: #f7fff9;       /* headings (slightly green-tinted) */
  --sos-text: #dde6e1;        /* body */
  --sos-muted: #8b9690;       /* secondary */
  --sos-dim: #56605b;         /* disabled / placeholder */

  /* ---- Rank tiers (level 1-100, see tierColor() in colors.ts) ---- */
  --sos-tier-1: var(--sos-white);       /* L1-20   Struggling */
  --sos-tier-2: var(--sos-green);       /* L21-40  Resisting */
  --sos-tier-3: var(--sos-cyan);        /* L41-60  Building */
  --sos-tier-4: var(--sos-purple);      /* L61-80  Mastering */
  --sos-tier-5: var(--sos-yellow-neon); /* L81-100 Liberated */

  /* ---- Type ----
   * The app ships NO custom font; it uses the platform system font. Picking a
   * webfont is an open brand decision (HANDOFF.md §3 / open question 3).
   * What IS the type signature: very heavy weights + wide-tracked caps kickers.
   */
  --sos-font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --sos-weight-heavy: 900;  /* headings, buttons — dominant in the app */
  --sos-weight-bold: 800;
  --sos-weight-medium: 700;
  --sos-kicker-size: 12px;
  --sos-kicker-tracking: 0.16em; /* caps section labels, e.g. "DAILY FOCUS" */

  /* ---- Shape / spacing (observed conventions, not a pre-existing scale) ---- */
  --sos-radius-card: 14px;
  --sos-radius-panel: 12px;
  --sos-radius-pill: 999px;
  --sos-pad-screen: 24px;
  --sos-pad-panel: 18px;
  --sos-tap-min: 48px; /* minimum interactive height */
}