/* Snapshot of live Wollio roles and dimensions from the six supplied Figma nodes. */
:root {
  --surface: #fdfdff;
  --on-surface: #191926;
  --on-surface-variant: #45455c;
  --surface-variant: #e5e5f0;
  --primary: #0000ff;
  --on-primary: #ffffff;
  --primary-container: #ddddff;
  --on-primary-container: #000066;
  --secondary: #000033;
  --success: #4bd088;
  --on-success: #002915;
  --tertiary: #147341;
  --tertiary-container: #c6f3db;
  --outline-variant: #c6c6d8;
  --inverse-on-surface: #f3f3fc;
  --payment-surface: #01012a; /* Explicit fill in nodes 96:3777 and 96:4384. */
  --list-selected: rgba(84,84,191,.08); /* Existing Selected=True layer, 96:3824. */
  --space-0: 0px;
  --space-1: 1px;
  --space-4: 4px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-40: 40px;
  --radius-chip: 12px;
  --radius-row: 16px;
  --radius-action: 24px;
  --radius-card: 28px;
  --radius-device: 32px;
  --radius-full: 1000px;
  --screen-width: 375px;
  --screen-height: 812px;
  --status-height: 52px;
  --appbar-height: 64px;
  --button-height: 56px;
  --key-height: 62px;
  --key-width: 96px;
  --keypad-width: 312px;
  --action-height: 96px;
  --body-font: 'Roboto', sans-serif;
  --heading-font: 'Inter', sans-serif;
  --body-size: 16px;
  --body-line: 24px;
  --body-tracking: .5px;
  --small-size: 14px;
  --small-line: 20px;
  --small-tracking: .25px;
  --label-tracking: .1px;
  --title-size: 22px;
  --title-line: 28px;
  --headline-small: 24px;
  --headline-small-line: 32px;
  --headline-medium: 28px;
  --headline-medium-line: 36px;
  --headline-large: 32px;
  --headline-large-line: 40px;
  --display-small: 36px;
  --display-small-line: 44px;
  --display-large: 57px;
  --display-large-line: 64px;
  --display-tracking: -.25px;
}