:root {
  color-scheme: light;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --font-mono: "SF Mono", "Fira Code", "Fira Mono", "Roboto Mono", monospace;

  --background: #f6f5f1;
  --foreground: #1c1b18;
  --card: #fdfcf9;
  --muted: #ecebe5;
  --muted-foreground: #5a564e;
  --border: #e0ddd4;
  --input: #8c877b;
  --primary: #1f6a52;
  --primary-hover: #17533f;
  --primary-foreground: #fdfcf9;
  --ring: #1f6a52;
  --destructive: #b42318;

  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-body: 0.9375rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-display: clamp(2rem, 1.25rem + 3vw, 2.75rem);

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --leading-tight: 1.15;
  --leading-body: 1.65;

  --control-height: 2.75rem;
  --control-pad-x: 1.125rem;
  --field-pad-x: 0.875rem;
  --control-font-size: var(--text-base);
  --reach: 2.75rem;
  --radius: 6px;
  --border-width: 1px;
  --ring-width: 2px;

  --space-within: 0.75rem;
  --space-label: 1rem;
  --rhythm-continues: 2.75rem;
  --rhythm-stands-apart: 4rem;
  --rhythm-opens-the-page: 3rem;

  --gutter: 1.5rem;
  --max-width: 640px;

  --duration-quick: 150ms;
  --duration-settle: 240ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-theme="dark"] {
  color-scheme: dark;

  --background: #141412;
  --foreground: #ebe8e1;
  --card: #1c1b19;
  --muted: #262522;
  --muted-foreground: #a9a497;
  --border: #302e2a;
  --input: #74706a;
  --primary: #7cc8ab;
  --primary-hover: #98d7bf;
  --primary-foreground: #0f1f19;
  --ring: #7cc8ab;
  --destructive: #f28b7d;
}

@media (min-width: 480px) {
  :root {
    --gutter: 2rem;
    --rhythm-opens-the-page: 4rem;
  }
}