/* Kinvy shared tokens: one set for iOS, Android and web.
   Mirrored in tokens.json for the native builds. */
:root {
  /* Color */
  --canvas: #EEEEF0;
  --surface: #FFFFFF;
  --surface-2: #F5F5F7;
  --surface-3: #E4E4E9;
  --border: #E3E3E8;
  --border-strong: #C6C6CE;
  --ink: #0B0B0F;
  --muted: #63636C;
  --primary: #0B0B0F;        /* black: headings, active states, dark cards */
  --primary-press: #2A2A31;
  --primary-tint: #E4E4E9;
  --action: #3366FF;         /* our blue: the one loud color, 4.7:1 with white */
  --action-press: #1F4FE0;
  --action-tint: #E8EEFF;
  --danger: #D12F35;
  --danger-press: #A9232A;
  --danger-tint: #FDECEC;
  --success: #2350E6;
  --success-tint: #E8EEFF;
  --focus: #E4E4E9;          /* keyboard focus is a quiet background, never a ring */

  /* Radius */
  --r-card: 24px;
  --r-input: 16px;
  --r-sheet: 32px;
  --r-full: 999px;

  /* Spacing: 8pt grid */
  --s1: 8px;
  --s2: 16px;
  --s3: 24px;
  --s4: 32px;
  --s5: 40px;
  --s6: 48px;

  /* Type: rem so it scales with Dynamic Type */
  --font: "Plus Jakarta Sans", system-ui, sans-serif;
  --hatch: repeating-linear-gradient(-45deg, #D5D5DC 0 1.5px, transparent 1.5px 7px);
  --t-body: 1.0625rem;   /* 17pt */
  --t-small: 1.0625rem;  /* nothing reads smaller than body */
  --t-label: 1.125rem;
  --t-h3: 1.25rem;
  --t-h2: 1.375rem;
  --t-h1: 1.875rem;
  --t-display: 2.375rem;

  /* Touch */
  --tap: 3rem;           /* 48pt, grows with text size */
  --tap-lg: 3.5rem;
}