:root {
  --color-bg: #FCFCFA;
  --color-surface: #F5F4F1;
  --color-fg: #14131A;
  --color-fg-muted: #6B6873;
  --color-border: #E6E4DF;
  --color-primary: #4F3FD9;
  --color-primary-hover: #3D2FC0;
  --color-suggestion-overlay: rgba(79, 63, 217, 0.08);
  --color-counterproposal-overlay: rgba(181, 101, 29, 0.08);
  --color-success: #2F7D52;
  --color-warning: #B5651D;
  --color-danger: #B83A3A;
  --color-guide: #E11D74;
  --font-display: "Fraunces", Georgia, serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --radius-sm: 4px;
  --radius-md: 8px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-fg);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
::selection { background: var(--color-primary); color: #fff; }

.retocca-brand {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}