/* Splitproof Design System tokens — copied verbatim from the Claude Design
   project "All fidelity Wireframes" (_ds/splitproof-design-system-88086db7).
   Source of truth: docs/design-system/design-system.md. Do not edit values
   here without updating the design system. */

/* ---- fonts.css ----
   Single family: IBM Plex Sans (true tabular figures via font-variant-numeric).
   Loaded from Google Fonts; ship the OTF/TTFs with the app bundle in production. */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&display=swap");

/* ---- colors.css ----
   Hex values are canonical (React Native has no oklch). Derived from an oklch
   system: brand hue 280 (indigo), owed hue 245 (blue), owe hue 60 (orange) —
   a colorblind-safe pair. Semantic amounts are ALWAYS paired with a sign
   (+/−) so color is never the only cue.
   Dark theme: scope with [data-theme="dark"] on any ancestor. */

:root {
  /* Brand */
  --brand: #434582;                /* oklch(0.42 0.10 280) */
  --brand-pressed: #343470;
  --brand-tint: #E7EAFF;           /* subtle brand surface */
  --brand-tint-pressed: #D8DCF9;
  --on-brand: #FFFFFF;
  --focus-ring: #43458266;         /* brand @ 40% */

  /* Semantic: money direction */
  --owed: #02629C;                 /* you are owed (+) */
  --owed-bg: #DFF1FF;
  --owe: #A15000;                  /* you owe (−) */
  --owe-bg: #FEEBD6;
  --settled: #6E717B;              /* zero balance — deliberately quiet */

  /* Semantic: sync state */
  --pending-text: #875800;
  --pending-border: #CC9C42;       /* used as 1.5px DASHED border */
  --pending-bg: #FDF6E8;
  --failed-text: #B32228;
  --failed-bg: #FFE7E4;

  /* Destructive (actions, not balances) */
  --danger: #B32228;
  --danger-pressed: #9E0016;
  --danger-bg: #FFE7E4;
  --on-danger: #FFFFFF;

  /* Neutrals */
  --bg-app: #F2F3F5;
  --bg-card: #FDFDFE;
  --bg-sunken: #EAEBEE;            /* inset wells, input backgrounds */
  --border: #DCDEE1;
  --border-strong: #C2C4C9;
  --text-primary: #181A22;
  --text-secondary: #53555E;
  --text-tertiary: #7E8088;
  --scrim: #181A2299;              /* bottom-sheet overlay */

  color-scheme: light;
}

[data-theme="dark"] {
  --brand: #8B90DB;
  --brand-pressed: #9DA3EF;
  --brand-tint: #282A4B;
  --brand-tint-pressed: #33365C;
  --on-brand: #0F101F;
  --focus-ring: #8B90DB66;

  --owed: #78BFF9;
  --owed-bg: #112B40;
  --owe: #F0A556;
  --owe-bg: #3F2810;
  --settled: #8D8F95;

  --pending-text: #E6B55D;
  --pending-border: #916922;
  --pending-bg: #31240E;
  --failed-text: #F97770;
  --failed-bg: #4B1E1B;

  --danger: #F97770;
  --danger-pressed: #FF8A82;
  --danger-bg: #4B1E1B;
  --on-danger: #2B0B09;

  --bg-app: #121319;
  --bg-card: #1B1D23;
  --bg-sunken: #0C0D12;
  --border: #2E3037;
  --border-strong: #454750;
  --text-primary: #E6E8EB;
  --text-secondary: #A2A4AB;
  --text-tertiary: #787A82;
  --scrim: #000000B3;

  color-scheme: dark;
}

/* ---- typography.css ----
   One family: IBM Plex Sans. Amounts use the SAME family with
   font-variant-numeric: tabular-nums — never proportional figures on money.
   Negative amounts use U+2212 MINUS SIGN (−), not hyphen. */

:root {
  --font-ui: "IBM Plex Sans", -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Text scale (size / line-height / weight) */
  --text-display-size: 34px;   --text-display-lh: 40px;  --text-display-weight: 700;  /* screen-level balance */
  --text-title-size: 24px;     --text-title-lh: 30px;    --text-title-weight: 700;    /* screen titles */
  --text-headline-size: 17px;  --text-headline-lh: 22px; --text-headline-weight: 600; /* card + row titles */
  --text-body-size: 15px;      --text-body-lh: 21px;     --text-body-weight: 400;     /* default */
  --text-body-sm-size: 13px;   --text-body-sm-lh: 18px;  --text-body-sm-weight: 400;  /* secondary/meta */
  --text-caption-size: 12px;   --text-caption-lh: 16px;  --text-caption-weight: 500;  /* badges, timestamps */
  --text-overline-size: 11px;  --text-overline-lh: 14px; --text-overline-weight: 600; /* uppercase, 0.08em tracking */

  /* Amount scale — always tabular-nums, tighter tracking at large sizes */
  --amount-lg-size: 34px;  --amount-lg-lh: 40px;  --amount-lg-weight: 700;  /* hero balance; -0.01em */
  --amount-md-size: 20px;  --amount-md-lh: 26px;  --amount-md-weight: 600;  /* row totals, sheet amounts */
  --amount-sm-size: 15px;  --amount-sm-lh: 20px;  --amount-sm-weight: 600;  /* list rows */
  --amount-xs-size: 13px;  --amount-xs-lh: 18px;  --amount-xs-weight: 500;  /* rates, per-person breakdown */

  --tabular: "tnum" 1;
}

/* ---- spacing.css ----
   4px base grid. Density: medium — 12px row gaps, 16px screen gutters.
   Radius rule: crisp rectangles for content (cards, inputs, rows),
   pills for actions (buttons, badges, toggles). */

:root {
  --space-05: 2px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;   /* default screen gutter */
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  --radius-xs: 4px;    /* checkboxes, tiny chips */
  --radius-sm: 6px;    /* inline tags */
  --radius-md: 10px;   /* inputs, list-row containers */
  --radius-lg: 12px;   /* cards */
  --radius-xl: 20px;   /* bottom sheet top corners */
  --radius-pill: 999px;/* buttons, badges, toggles */

  /* Elevation — borders first, shadows sparingly (cards sit on tinted bg) */
  --shadow-card: 0 1px 2px #181A220A;
  --shadow-sheet: 0 -8px 32px #181A2226;

  /* Hit targets */
  --hit-min: 44px;
  --control-h: 48px;     /* buttons, inputs */
  --control-h-sm: 36px;
  --row-h: 56px;
}