@import "tailwindcss";

:root {
  --paper: #f4ece0;
  --paper-soft: #fbf7f1;
  --paper-strong: #fffdf8;
  --ink: #241b14;
  --ink-soft: #3d2d20;
  --muted: #726153;
  --line: rgba(85, 60, 42, 0.15);
  --copper: #c76733;
  --copper-deep: #964722;
  --olive: #76845e;
  --olive-deep: #596946;
}

@theme inline {
  --color-background: var(--paper);
  --color-foreground: var(--ink);
  --font-sans: var(--font-body);
}

* {
  box-sizing: border-box;
}

html {
  background: #ecdfcf;
}

body {
  color: var(--ink);
  font-family: var(--font-body), sans-serif;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.82), transparent 34%),
    radial-gradient(circle at 88% 10%, rgba(205, 126, 76, 0.22), transparent 22%),
    linear-gradient(180deg, #f6eee1 0%, #efe2d1 52%, #e8d6c3 100%);
}

a {
  color: inherit;
  text-decoration: none;
}

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

::selection {
  background: rgba(199, 103, 51, 0.18);
}

.paper-panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 249, 241, 0.84)),
    repeating-linear-gradient(
      135deg,
      rgba(198, 163, 127, 0.06),
      rgba(198, 163, 127, 0.06) 10px,
      rgba(255, 255, 255, 0.08) 10px,
      rgba(255, 255, 255, 0.08) 20px
    );
}