/* Synapse study system
   One token set for every screen: color, type, radius, spacing, motion.
   Press feedback only. The quiz timer is never transitioned. */

:root {
  --color-canvas: #e4e1d8;
  --color-paper: #f3f1eb;
  --color-surface: #ffffff;
  --color-ink: #1a1a1a;
  --color-ink-hover: #333333;
  --color-muted: #524e46;
  --color-line: #e3e0d6;
  --color-line-strong: #cfcbc0;
  --color-frame: #d5d1c6;
  --color-fill: #e8e5dc;
  --color-inverse: #f6f4ef;
  --color-correct: #1b7a45;
  --color-wrong: #c2312a;
  --color-flagged: #8f5e00;

  --shadow-phone: 0 1px 0 rgba(26, 26, 26, 0.04), 0 24px 48px rgba(26, 26, 26, 0.08);
  --ring: 0 0 0 1px var(--color-line);

  --font-ui: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-reading: "Source Serif 4", "Iowan Old Style", Palatino, "Palatino Linotype", serif;

  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-display: 28px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;

  --leading-tight: 1.15;
  --leading-ui: 1.45;
  --leading-reading: 1.5;

  --tracking-tight: -0.02em;
  --tracking-label: 0.04em;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-phone: 40px;
  --radius-pill: 999px;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  --phone-width: 390px;
  --phone-height: 844px;
  --bar-height: 4px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-press: 160ms;
  --duration-color: 150ms;
  --duration-ui: 200ms;
}