/*
 * Design-system tokens for the xyzwallet receiver web page (PRD §1).
 *
 * SINGLE SOURCE OF TRUTH FOR THESE VALUES IS THE RN APP, in the SIBLING repo
 * `xyz-wallet` (this `xyz-wallet-test` repo is the standalone receiver site): see
 * src/theme/colors.ts, src/theme/spacing.ts, src/theme/typography.ts there. This file
 * is a hand-MIRROR so the web surface looks like it belongs to the same product without
 * importing React Native. If a token changes in the app's src/theme/, change it here too
 * (drift is catchable by eye: the hex/px below are copied verbatim). Session 14 follow-up
 * on the pre-launch checklist: GENERATE this from src/theme so it can't drift.
 *
 * Roles mirror PRD §1.2 (light + dark). Dark mode is driven by prefers-color-scheme,
 * exactly as the app folds in the OS scheme.
 */

:root {
  /* Color roles — light (src/theme/colors.ts lightColors) */
  --brand-primary: #414bb2;
  --on-brand: #ffffff;
  --bg-canvas: #ffffff;
  --bg-surface: #f4f4f6;
  --text-primary: #101019;
  --text-muted: #808080;
  --status-owed: #0b7d5c;   /* money owed TO you — cool emerald */
  --status-you-owe: #d2762f; /* money YOU owe — deep amber, never alarm red */
  --accent-tint: #c2dbff;   /* Uranian Blue — tints only */
  --summary-bg: #eef1fc;    /* soft brand tint behind summary panels */
  --bg-tint-soft: #f2f5fd;  /* gently-grouped panels */
  --hairline: #e4e4ea;      /* dividers */

  /* Spacing — 8pt rhythm (src/theme/spacing.ts space.*) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;  /* default gutter */
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 40px;

  /* Radius (src/theme/spacing.ts radius.*) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --tap-min: 44px;

  /* Type — iOS ramp mapped to px (src/theme/typography.ts type.*). All UI text is
     the platform system font (SF Pro on iOS); on the web we ask for the same
     system stack so a guest sees the same letterforms. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* Flavor accent (type.flavor / fonts.flavor) = the LT Remark serif accent in the app.
     The web does not bundle the LT Remark binary, so flavor lines fall back to a serif;
     change in ONE place here to re-font the flavor voice, mirroring fonts.flavor. */
  --font-flavor: "LT Remark", Georgia, "Times New Roman", serif;

  --size-large-title: 34px;  --lh-large-title: 41px;
  --size-title: 28px;        --lh-title: 34px;
  --size-headline: 17px;     --lh-headline: 22px;
  --size-body: 17px;         --lh-body: 22px;
  --size-subhead: 15px;      --lh-subhead: 20px;
  --size-footnote: 13px;     --lh-footnote: 18px;
  --size-caption: 12px;      --lh-caption: 16px;
  --size-amount-lg: 30px;    --lh-amount-lg: 34px;
  --size-amount-md: 17px;    --lh-amount-md: 22px;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Color roles — dark (src/theme/colors.ts darkColors) */
    --brand-primary: #a6adff;
    --on-brand: #101019;
    --bg-canvas: #131319;
    --bg-surface: #1e1e27;
    --text-primary: #f4f2e6;
    --text-muted: #9a9aa2;
    --status-owed: #3fd6a6;
    --status-you-owe: #f5a06a;
    --accent-tint: #2e3460;
    --summary-bg: #1b1d29;
    --bg-tint-soft: #1a1c27;
    --hairline: #3a3a47;
  }
}