/* ─────────────────────────────────────────────────────────────────────────
 * COLOR TOKENS — mirrored 1:1 from bolt-ds (code is canonical).
 *
 * Two layers:
 *   1. PRIMITIVES  (--c-<family>-<shade>)  raw palette, mode-agnostic.
 *   2. SEMANTIC    (--color-<intent>-<role>) intent-based; components use ONLY these.
 *
 * Two grey palettes serve DIFFERENT roles — never cross them:
 *   neutral.*  (warm true greys)  → TEXT
 *   blueGrey.* (cool blue greys)  → SURFACES & BORDERS
 * ───────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Primitives ─────────────────────────────────────────────────────── */

  /* Purple */
  --c-purple-100: #e7dafb; --c-purple-200: #ceb5f7; --c-purple-300: #b38cf3;
  --c-purple-400: #9b67ef; --c-purple-500: #8242eb; --c-purple-600: #6117d9;
  --c-purple-700: #4811a1; --c-purple-800: #320c6f; --c-purple-900: #190637;

  /* Blue */
  --c-blue-100: #ebf0ff; --c-blue-200: #d3dfff; --c-blue-300: #99b4ff;
  --c-blue-400: #618bff; --c-blue-500: #245eff; --c-blue-600: #003feb;
  --c-blue-700: #002ead; --c-blue-800: #001f75; --c-blue-900: #000f38;

  /* Blue Grey — SURFACES & BORDERS */
  --c-bluegrey-100: #f0f3f8; --c-bluegrey-200: #e2e6ef; --c-bluegrey-300: #bbc3cf;
  --c-bluegrey-400: #9ba7b7; --c-bluegrey-500: #7b8a9f; --c-bluegrey-600: #5b6d87;
  --c-bluegrey-700: #41536b; --c-bluegrey-800: #29384d; --c-bluegrey-900: #172232;

  /* Green */
  --c-green-100: #e2f3e3; --c-green-200: #c2e5c3; --c-green-300: #a6d9a8;
  --c-green-400: #7ec881; --c-green-500: #5bb95e; --c-green-600: #429a45;
  --c-green-700: #317233; --c-green-800: #204b21; --c-green-900: #112712;

  /* Yellow */
  --c-yellow-100: #fff3c7; --c-yellow-200: #ffe78f; --c-yellow-300: #ffdb57;
  --c-yellow-400: #ffd129; --c-yellow-500: #f5c000; --c-yellow-600: #c29800;
  --c-yellow-700: #947400; --c-yellow-800: #614c00; --c-yellow-900: #332800;

  /* Orange — THE BRAND (Poppy) */
  --c-orange-100: #ffdccc; --c-orange-200: #ffb999; --c-orange-300: #fe9767;
  --c-orange-400: #fe7434; --c-orange-500: #fd5201; --c-orange-600: #cb4101;
  --c-orange-700: #983101; --c-orange-800: #662000; --c-orange-900: #331000;

  /* Red */
  --c-red-100: #fcd9d9; --c-red-200: #fab3b3; --c-red-300: #f78c8c;
  --c-red-400: #f46161; --c-red-500: #f23c3c; --c-red-600: #e10f0f;
  --c-red-700: #ac0b0b; --c-red-800: #730808; --c-red-900: #390404;

  /* Neutral — warm true greys → TEXT */
  --c-neutral-100: #ededed; --c-neutral-200: #e0e0e0; --c-neutral-300: #c7c7c7;
  --c-neutral-400: #a8a8a8; --c-neutral-500: #8c8c8c; --c-neutral-600: #6c6c6c;
  --c-neutral-700: #575757; --c-neutral-800: #3d3d3d; --c-neutral-900: #262626;

  --c-white: #ffffff;
  --c-black: #000000;

  /* ── Semantic — Primary (brand orange) ─────────────────────────────── */
  --color-primary-surface: var(--c-orange-500);          /* Button.primary, focus outline */
  --color-primary-surface-pressed: var(--c-orange-600);
  --color-primary-surface-tonal1: #fff8f5;               /* lightest tint */
  --color-primary-surface-tonal2: #ffede5;               /* soft chip bg */
  --color-primary-surface-tonal3: var(--c-orange-300);   /* soft-selected fill */
  --color-primary-text: var(--c-orange-500);             /* personal-name highlight */
  --color-primary-text-strong: var(--c-orange-700);      /* on soft / outline */
  --color-primary-text-inverse: var(--c-white);
  --color-primary-border: var(--c-orange-500);

  /* ── Semantic — Neutral (action greys + text) ───────────────────────── */
  --color-neutral-surface: var(--c-white);               /* page bg */
  --color-neutral-surface-disabled: var(--c-bluegrey-200);
  --color-neutral-surface-tonal1: var(--c-bluegrey-100); /* softest card bg */
  --color-neutral-surface-tonal2: var(--c-bluegrey-200); /* Button.tertiary, Toggle OFF */
  --color-neutral-surface-tonal3: var(--c-bluegrey-300); /* pressed, input borders */
  --color-neutral-surface-inverse: #0b111b;              /* dark navy — TabBar SELECTED PILL ONLY. NOT a section/page ground. */
  --color-neutral-surface-dark: #202020;                 /* dark grey — the brand dark ground (HeroCard dark, dark sections) */
  --color-neutral-surface-solid: var(--c-black);         /* Button.secondary */
  --color-neutral-surface-solid-pressed: var(--c-neutral-900);
  --color-neutral-text: var(--c-black);                  /* primary body text */
  --color-neutral-text-subtle: var(--c-neutral-600);     /* secondary text (warm grey) */
  --color-neutral-text-disabled: var(--c-neutral-300);
  --color-neutral-text-inverse: var(--c-white);
  --color-neutral-border: #0b111b;                       /* dark navy — small control outline only (Radio/Checkbox/Chip) */

  /* ── GROUNDS — the only approved large backgrounds ──────────────────── *
   * Healthee grounds are WHITE, BLACK, or POPPY. Use:                      *
   *   white  → --color-neutral-surface  (#ffffff, default page)            *
   *   black  → --color-neutral-surface-solid (#000000) or                  *
   *            --color-neutral-surface-dark (#202020, softer dark)         *
   *   poppy  → --color-primary-surface (#fd5201, deliberate accent ground) *
   * NEVER use the navy --color-neutral-surface-inverse (#0b111b) as a      *
   * section, hero, or page background — it's the TabBar pill only. A dark  *
   * navy ground is off-brand. */
  --color-neutral-border-subtle: var(--c-bluegrey-100);  /* most-used divider */
  --color-neutral-border-muted: var(--c-bluegrey-200);   /* outlined card stroke */
  --color-neutral-border-disabled: var(--c-bluegrey-200);

  /* ── Semantic — Status: Info ────────────────────────────────────────── */
  --color-info-solid-bg: var(--c-blue-500);
  --color-info-solid-fg: var(--c-white);
  --color-info-soft-bg: var(--c-blue-100);
  --color-info-soft-fg: var(--c-blue-500);
  --color-info-border: var(--c-blue-300);

  /* ── Semantic — Status: Warning ─────────────────────────────────────── */
  --color-warning-solid-bg: var(--c-yellow-300);
  --color-warning-solid-fg: var(--c-black);              /* yellow can't carry white */
  --color-warning-soft-bg: var(--c-yellow-100);
  --color-warning-soft-fg: var(--c-yellow-700);
  --color-warning-border: var(--c-yellow-300);

  /* ── Semantic — Status: Success ─────────────────────────────────────── */
  --color-success-solid-bg: var(--c-green-600);
  --color-success-solid-fg: var(--c-white);
  --color-success-soft-bg: var(--c-green-100);
  --color-success-soft-fg: var(--c-green-700);
  --color-success-border: var(--c-green-500);

  /* ── Semantic — Status: Error ───────────────────────────────────────── */
  --color-error-solid-bg: var(--c-red-500);
  --color-error-solid-fg: var(--c-white);
  --color-error-soft-bg: var(--c-red-100);
  --color-error-soft-fg: var(--c-red-700);
  --color-error-border: var(--c-red-500);

  /* ── Overlays (scrims) ──────────────────────────────────────────────── */
  --overlay-light: #00000033;  /* 20% black */
  --overlay-heavy: #000000b8;  /* ~72% black */
}