* {
  box-sizing: border-box;
}

*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --warm-50: #fdf8f4;
  --warm-100: #f9ede2;
  --warm-200: #f0d9c4;
  --warm-300: #e4bf9e;
  --warm-500: #c4834e;
  --warm-700: #8a5230;
  --warm-900: #4a2b1a;

  --stone-50: #fafaf9;
  --stone-100: #f5f5f4;
  --stone-200: #e7e5e4;
  --stone-300: #d6d3d1;
  --stone-400: #a8a29e;
  --stone-500: #78716c;
  --stone-600: #57534e;
  --stone-700: #44403c;
  --stone-800: #292524;
  --stone-900: #1c1917;

  --green-100: #e8f5eb;
  --green-200: #cbe9d2;
  --green-700: #1f7a3c;
  --blue-100: #e6f0fd;
  --blue-200: #c7defc;
  --blue-700: #1f5ea8;
  --amber-100: #fff3d6;
  --amber-200: #f3d18f;
  --amber-800: #835100;
  --red-100: #fde8e8;
  --red-200: #f8c9c9;
  --red-800: #9f1b1b;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 6px 20px rgba(0, 0, 0, 0.1);

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;

  --font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  font-family: var(--font-family);
  background: var(--warm-50);
  color: var(--stone-800);
  line-height: 1.5;
}

a {
  color: inherit;
}

img {
  max-width: 100%;
  display: block;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--blue-700);
  outline-offset: 2px;
}