@import "tailwindcss";

:root {
  --background: #fff6ea;
  --background-elevated: rgba(255, 251, 245, 0.9);
  --background-soft: rgba(255, 238, 214, 0.68);
  --foreground: #1f1308;
  --muted: #6e5643;
  --accent: #c1121f;
  --accent-strong: #7f1d1d;
  --accent-soft: rgba(193, 18, 31, 0.16);
  --secondary: #111111;
  --secondary-soft: rgba(17, 17, 17, 0.12);
  --border: rgba(58, 37, 19, 0.12);
  --card-shadow: 0 24px 80px -36px rgba(103, 55, 20, 0.24);
}

.dark {
  --background: #0c1116;
  --background-elevated: rgba(20, 27, 35, 0.88);
  --background-soft: rgba(27, 36, 47, 0.72);
  --foreground: #f7efe6;
  --muted: #c7b6a7;
  --accent: #ef4444;
  --accent-strong: #f87171;
  --accent-soft: rgba(239, 68, 68, 0.2);
  --secondary: #f3f4f6;
  --secondary-soft: rgba(243, 244, 246, 0.14);
  --border: rgba(255, 243, 230, 0.1);
  --card-shadow: 0 24px 80px -40px rgba(0, 0, 0, 0.72);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  background: var(--background);
  color: var(--foreground);
}
::selection { background: var(--accent-soft); }

.page-enter { animation: page-enter 0.8s ease both; }
@keyframes page-enter {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

.surface {
  background: var(--background-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
  backdrop-filter: blur(22px);
}

.tone-soft { background: var(--background-soft); }

.content-html {
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.95;
}
.content-html > * + * { margin-top: 1.2rem; }
.content-html h1,
.content-html h2,
.content-html h3,
.content-html h4,
.content-html h5,
.content-html h6 {
  color: var(--foreground);
  font-weight: 700;
  line-height: 1.15;
  margin-top: 2.25rem;
  margin-bottom: 0.75rem;
}
.content-html h2 { font-size: clamp(1.75rem, 4vw, 2.4rem); }
.content-html h3 { font-size: clamp(1.3rem, 3vw, 1.8rem); }
.content-html a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-decoration-color: var(--accent-soft);
  text-underline-offset: 0.22em;
}
.dark .content-html a { color: var(--accent-strong); }
.content-html p,
.content-html li { color: var(--muted); }
.content-html ul,
.content-html ol { padding-left: 1.2rem; }
.content-html img,
.content-html iframe,
.content-html video {
  width: 100%;
  border-radius: 1.5rem;
  margin-top: 1.5rem;
}
.content-html blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  color: var(--foreground);
  font-style: italic;
}