/* Belgo design tokens. See SKILL.md for when to use each one. */
:root {
  /* Brand (Belgo Identity Guidelines 2025) */
  --beige: #F8F6D7;
  --ink: #1E1E1E;

  /* Neutrals for the app */
  --white: #FFFFFF;
  --muted: #5C5A4F;
  --line: #DDD9B4;

  /* Status (brand secondary palette) */
  --red: #CB333B;
  --orange: #F58C35;
  --yellow: #F3D148;
  --green: #6CC24A;
  --blue: #4899D5;

  /* Type */
  --font-title: "Source Serif 4", "Times New Roman", Times, serif;
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --size-title: 28px;
  --size-body: 16px;
  --size-small: 14px;

  /* Shape */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --radius: 4px;
  --tap: 44px;

  /* Motion (see SKILL.md, Motion) */
  --motion-fast: 150ms;
  --motion: 250ms;
}

body {
  background: var(--beige);
  color: var(--ink);
  font: var(--size-body)/1.5 var(--font-ui);
}