/* Synapse study system
   Soft structuralism, scaled to a phone: silver field, nested shells,
   one grotesk for controls and one for long reading.
   Correct, wrong, and flagged never share a hue.
   Selection is ink. Progress is slate. Neither is a result color. */

:root {
  --color-canvas: #E4E7EC;
  --color-screen: #F2F4F6;
  --color-shell: rgba(22, 24, 28, 0.045);
  --color-core: #FFFFFF;
  --color-ink: #16181C;
  --color-ink-soft: #3E4650;
  --color-muted: #5C6670;
  --color-action: #171A1E;
  --color-on-action: #F7F8F9;
  --color-on-action-soft: rgba(247, 248, 249, 0.14);
  --color-hairline: rgba(22, 24, 28, 0.08);
  --color-track: rgba(22, 24, 28, 0.08);
  --color-progress: #243140;

  --color-correct: #1C7A45;
  --color-correct-soft: #E5F5EC;
  --color-wrong: #C9344C;
  --color-wrong-soft: #FDECEF;
  --color-flagged-ink: #7A4E06;
  --color-flagged-soft: #FBF4E3;

  --font-display: "Plus Jakarta Sans", sans-serif;
  --font-text: "Geist", "Plus Jakarta Sans", sans-serif;

  --text-display: 2rem;
  --text-title: 1.75rem;
  --text-figure: 1.75rem;
  --text-body: 1.0625rem;
  --text-ui: 0.9375rem;
  --text-meta: 0.8125rem;
  --text-eyebrow: 0.625rem;

  --leading-display: 1.15;
  --leading-body: 1.5;
  --leading-ui: 1.35;
  --tracking-display: -0.035em;
  --tracking-eyebrow: 0.18em;

  --radius-shell: 2rem;
  --radius-core: calc(2rem - 0.375rem);
  --radius-row: 1rem;
  --radius-pill: 999px;
  --radius-device: 2.75rem;

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

  --size-icon: 1rem;
  --size-island: 2rem;
  --size-bar: 0.5rem;
  --size-touch: 2.75rem;
  --size-letter: 1.75rem;

  --shadow-ambient: 0 24px 50px rgba(22, 28, 36, 0.07);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92);

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --motion-duration: 700ms;
  --z-noise: 1;
}