/* Every color, size and font used by the app. Components only use these names.
   Palette taken from imigongo: clay walls, black, natural white, burnt red earth. */

:root {
  --bg: #f6f0e6;
  --surface: #fffdf9;
  --text: #1c1714;
  --muted: #5e5249;
  --line: #e2d8c9;
  --line-strong: #a8998a;

  --ink: #1c1714;
  --clay: #a3401c;
  --clay-dark: #82321a;
  --chalk: #f6f0e6;

  --action: #1c1714;
  --action-hover: #3a302a;
  --action-text: #fffdf9;
  --accent: #a3401c;

  --ok: #1f7a3f;
  --ok-bg: #e4f3e8;
  --error: #b3261e;
  --error-bg: #fbe8e6;
  --warn: #8a5a00;
  --warn-bg: #fff2cc;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: 18px;
  --fs-h2: 20px;
  --fs-h1: 26px;
  --fs-big: 48px;

  --radius: 8px;
  --gap: 8px;
  --gutter: 16px;
  --max: 680px;
  --max-home: 1040px;
  --tap: 48px;
  --ease: 0.2s ease;
}

@media (min-width: 768px) {
  :root {
    --fs-h1: 32px;
    --fs-big: 64px;
    --gutter: 24px;
  }
}