/* Design tokens: every color, size and space the app uses, defined once. These mirror the Figma styles one to one,
   so when a style changes in Figma, the matching token changes here and the whole app follows.
   The values below are PayWatch's current blue and a starter scale, to be replaced from the Figma file. */
:root {
  /* Color */
  --color-brand-blue: #0370E7;
  --color-brand-blue-dark: #0450A8;
  --color-brand-blue-tint: #EAF1FE;
  --color-text-primary: #14171F;
  --color-text-secondary: #6B7280;
  --color-border: #E7ECF5;
  --color-background: #FBFCFE;
  --color-surface: #FFFFFF;
  --color-error: #C0392B;

  /* Type */
  --font-family-base: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-display: 30px;
  --font-size-title: 20px;
  --font-size-body: 15px;
  --font-size-small: 13px;
  --font-size-fine-print: 12px;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;
  --line-height-body: 1.6;

  /* Space */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;

  /* Shape and size */
  --radius-button: 10px;
  --radius-round: 50%;
  --size-content-max-width: 400px;
  --size-avatar: 64px;
  --size-logo: 30px;
}