/* Synapse study UI. One token set for every screen. */

:root {
  /* Cool press sheet, read in daylight. Chroma is reserved for state. */
  --color-backdrop: #e4e6ea;
  --color-canvas: #f2f3f5;
  --color-surface: #ffffff;
  --color-ink: #1a1d21;
  --color-ink-hover: #2c3138;
  --color-ink-press: #101216;
  --color-secondary: #3e4651;
  --color-border: #7d848e;
  --color-track: #e3e5e9;
  --color-hover: #e8eaed;
  --color-press: #dde0e5;

  --color-action: var(--color-ink);
  --color-action-ink: var(--color-surface);

  --color-correct: #0b6e40;
  --color-wrong: #b42318;
  --color-flagged: #7a4e00;

  --color-focus: var(--color-ink);
  --color-selection: #d5dbe3;

  --font-sans: "Public Sans", ui-sans-serif, sans-serif;

  --text-title: 1.375rem;
  --text-heading: 1.125rem;
  --text-body: 1rem;
  --text-label: 0.8125rem;
  --text-meta: 0.75rem;

  --weight-regular: 400;
  --weight-ui: 600;
  --weight-title: 700;

  --leading-title: 1.25;
  --leading-body: 1.5;
  --leading-ui: 1.35;

  --tracking-title: -0.02em;
  --tracking-body: 0;
  --tracking-label: 0.01em;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --radius-device: 28px;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;

  --frame-width: 390px;
  --frame-height: 844px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration: 180ms;

  --shadow-device: 0 14px 32px rgb(26 29 33 / 14%);
}