/* Synapse — Claymorphism
   Search: medical student quiz exam analytics --design-system -p "Synapse"
   Style: soft inner and outer shadows, 3px rims, 16–24px radius.
   Palette note from search: study purple + correct green.
   Flagged is a separate orange so it never matches correct green or wrong red. */

:root {
  --color-primary: #7c3aed;
  --color-on-primary: #ffffff;
  --color-secondary: #8b5cf6;
  --color-on-secondary: #000000;
  --color-accent: #059669;
  --color-on-accent: #000000;
  --color-background: #faf5ff;
  --color-foreground: #0f172a;
  --color-card: #ffffff;
  --color-card-foreground: #0f172a;
  --color-muted: #f7f3fd;
  --color-muted-foreground: #475569;
  --color-border: #efe7fc;
  --color-destructive: #dc2626;
  --color-on-destructive: #ffffff;
  --color-ring: #7c3aed;

  --color-correct: var(--color-accent);
  --color-on-correct: var(--color-on-accent);
  --color-wrong: var(--color-destructive);
  --color-on-wrong: var(--color-on-destructive);
  --color-flagged: #c2410c;
  --color-on-flagged: #ffffff;

  --color-primary-soft: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
  --color-correct-soft: color-mix(in srgb, var(--color-correct) 18%, var(--color-card));
  --color-wrong-soft: color-mix(in srgb, var(--color-wrong) 12%, var(--color-card));
  --color-flagged-soft: color-mix(in srgb, var(--color-flagged) 12%, var(--color-card));
  --color-stroke: color-mix(in srgb, var(--color-secondary) 58%, var(--color-card));
  --color-line: color-mix(in srgb, var(--color-foreground) 14%, var(--color-card));

  --font-display: "Varela Round", "Trebuchet MS", sans-serif;
  --font-body: "Nunito Sans", "Segoe UI", sans-serif;

  --text-sm: 14px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 28px;
  --text-3xl: 40px;
  --leading-tight: 1.2;
  --leading-body: 1.45;
  --leading-stem: 1.55;

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

  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 20px;
  --radius-xl: 24px;
  --radius-device: 32px;

  --border-width: 3px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --touch: 48px;

  --duration-press: 200ms;
  --ease-press: ease-out;

  --shadow-clay:
    inset 2px 2px 5px rgba(255, 255, 255, 0.92),
    inset -2px -3px 7px rgba(124, 58, 237, 0.08),
    0 8px 16px rgba(124, 58, 237, 0.12);
  --shadow-inset: inset 2px 2px 5px rgba(124, 58, 237, 0.06);
  --shadow-quiet: 0 1px 2px rgba(15, 23, 42, 0.05);
  --shadow-device: 0 18px 40px rgba(124, 58, 237, 0.16);
}