/* tokens.css — the MoneyBeh design system, on the web.
 *
 * These values mirror `web/docs/DesignTokens.md` in izzybeh/MoneyBeh, which in
 * turn mirrors the iOS asset catalog. THE ASSET CATALOG IS THE SOURCE OF TRUTH.
 * When a token changes there, change it here; never the other way round, and
 * never invent a value that only exists on the web.
 *
 * This file exists because the site had drifted. `legal.css` carried a palette
 * that approximated the app's without matching any of it — and its accent,
 * #3A8C7E, is the value PR #488 SUPERSEDED for failing contrast: white on that
 * fill measures 4.01:1, below the 4.5:1 AA threshold. The shipped accent is
 * #2F7A6A (5.11:1 white-on-fill, 4.53:1 on canvas).
 *
 * The dark palette had drifted further: the site's darks were cool (#0e0e10),
 * where the app's foundation is deliberately warm (#161514) — the "soft paper"
 * recolor. Two different apps, one domain.
 */

:root {
  /* Canvas + Surface */
  --mb-background: #F7F5F1;
  --mb-surface: #FDFCFA;
  --mb-surface-raised: #FFFFFF;
  --mb-surface-sunken: #EFEDE8;

  /* Text — warm-neutral grays, never pure black in body copy */
  --mb-text-primary: #23221F;
  --mb-text-secondary: #5C5B57;
  --mb-text-tertiary: #727169;
  --mb-text-disabled: #B9B7B1;

  /* Accent — Seafoam. One accent per screen, maximum. */
  --mb-accent: #2F7A6A;
  --mb-accent-soft: #E4F4F2;
  --mb-accent-mid: #A0D0C8;

  /* Lines */
  --mb-border: #E9E6E0;
  --mb-separator: #E2DFD9;

  /* Spacing — 8pt base grid; 4pt only for icon-to-label gaps */
  --mb-space-xxs: 4px;
  --mb-space-xs: 8px;
  --mb-space-sm: 12px;
  --mb-space-md: 16px;
  --mb-space-lg: 24px;
  --mb-space-xl: 32px;
  --mb-space-xxl: 48px;
  --mb-space-xxxl: 64px;

  /* Corner radius */
  --mb-radius-sm: 8px;    /* chips, badges, inline buttons */
  --mb-radius-md: 12px;   /* cards, text field inputs */
  --mb-radius-lg: 16px;   /* featured cards, sheets */
  --mb-radius-full: 999px;

  /* The Apple HIG minimum for anything tappable. A drawn glyph's size and its
     tappable size are different measurements; this is the tappable one. */
  --mb-hit-target: 44px;

  /* Type. iOS uses SF Pro; on web the stack falls back through it. Sizes are
     the iOS HIG scale from DesignTokens.md, in px at 1:1 with pt. */
  --mb-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --mb-title1: 34px;
  --mb-title2: 28px;
  --mb-title3: 20px;
  --mb-headline: 17px;
  --mb-body: 17px;
  --mb-callout: 16px;
  --mb-subhead: 15px;
  --mb-footnote: 13px;
  --mb-caption: 11px;

  /* Headlines and titles are tighter and more confident. Body and below take
     the system default — no custom tracking. */
  --mb-tracking-title: -0.02em;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mb-background: #161514;
    --mb-surface: #201F1D;
    --mb-surface-raised: #2B2A27;
    --mb-surface-sunken: #0F0E0D;

    --mb-text-primary: #F1EFEC;
    --mb-text-secondary: #A6A39D;
    --mb-text-tertiary: #86837E;
    --mb-text-disabled: #5C5A55;

    --mb-accent: #65B5A8;
    --mb-accent-soft: #102926;
    --mb-accent-mid: #3A8C7E;

    --mb-border: #353330;
    --mb-separator: #2E2C29;
  }
}