@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;
  --font-body:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    "PingFang SC",
    "Hiragino Sans GB",
    "Microsoft YaHei UI",
    "Microsoft YaHei",
    sans-serif;
  --font-display:
    ui-serif,
    "Songti SC",
    "STSong",
    "SimSun",
    "Times New Roman",
    serif;
}

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

* {
  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 {
  text-decoration: none;
}

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

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

@keyframes route-progress-slide {
  0% {
    transform: translateX(-140%) scaleX(0.72);
  }

  55% {
    transform: translateX(78%) scaleX(1);
  }

  100% {
    transform: translateX(240%) scaleX(0.86);
  }
}

.route-progress-bar {
  animation: route-progress-slide 1.15s ease-in-out infinite;
  transform-origin: left center;
  box-shadow: 0 0 18px rgba(199, 103, 51, 0.28);
}

.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
    );
}