/*
 * tokens.css: the design system, as CSS custom properties.
 *
 * Mirror of `src/constants/colors.ts` for the hosted web pages under
 * `public/`. Those pages cannot import TypeScript, so the values live here as
 * custom properties and the page stylesheets reference `var(--…)` rather than
 * hand-typing a hex.
 *
 * SOURCE OF TRUTH IS `src/constants/colors.ts`. Never change a value here
 * first. `tests/unit/constants/webSurfaceTokens.test.ts` reads both files and
 * fails if they disagree, so drift surfaces as a red test rather than as two
 * slightly different blues shipping to two surfaces.
 *
 * The sibling mirror for transactional email is `functions/src/emailTokens.ts`
 * with the same values and the same rule, covered by the same test.
 */

:root {
  /* ── Brand ─────────────────────────────────────────────────────────── */
  --navy: #0F2044;
  --teal: #0D7C7C;

  /* ── Semantic states ───────────────────────────────────────────────── */
  --success: #059669;

  /* ── Text (three-tier hierarchy) ───────────────────────────────────── */
  --text-primary: #374151;
  --text-secondary: #6B7280;
  --text-muted: #94A3B8;

  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --white: #FFFFFF;
  --border: #E2E8F0;

  /* ── Tints ─────────────────────────────────────────────────────────── */
  --tint-mint: #3FCDB4;

  /* ── Web & email surfaces (colors.web.*) ───────────────────────────── */
  /* Web/email only, never used in the React Native app. */
  --web-cream: #FAFAF7;
  --web-cream-sunken: #F5F5F0;
  --web-navy-deep: #1A2E55;
  --web-footer-text: #7A8AA0;
  --web-teal-pill: #E7F1EF;
  --web-teal-pill-border: #C5DEDB;
  --web-cream-border: #C8DDDA;

  /* ── Derived, alpha-composited variants ────────────────────────────── */
  /* CSS cannot apply an alpha to a hex custom property without color-mix(),
     which is not universally safe yet, so the rgba() forms that the page
     genuinely needs are spelled out here from the tokens above. The rgb
     triples are `navy` (15,32,68), `teal` (13,124,124), `tint.mint`
     (63,205,180) and `success` (5,150,105). */
  --navy-rgb: 15, 32, 68;
  --teal-rgb: 13, 124, 124;
  --tint-mint-rgb: 63, 205, 180;
  --success-rgb: 5, 150, 105;

  /* ── Type ──────────────────────────────────────────────────────────── */
  /* The app renders in Inter. Web pages CAN load a webfont, so they do,
     unlike email, which falls back to the system stack. */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Menlo, Consolas, 'Courier New', monospace;

  /* ── Geometry (theme.ts) ───────────────────────────────────────────── */
  --radius-md: 12px;   /* radius.md */
  --radius-lg: 16px;   /* radius.lg */
  --radius-full: 999px;/* radius.full */
  --btn-height: 52px;  /* component.btnHeight */
}