/* ============================================================
   EnVision: Base / reset / typography
   ============================================================ */

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

* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background-color: var(--bg);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

:root:not([data-color-scheme="dark"]) body {
  background-image:
    radial-gradient(880px 520px at 92% -8%, color-mix(in srgb, var(--sand) 75%, transparent), transparent 58%),
    radial-gradient(720px 440px at -6% 100%, color-mix(in srgb, var(--wood-light) 18%, transparent), transparent 56%),
    linear-gradient(180deg, var(--cream) 0%, var(--bg) 42%, var(--bg) 100%);
  background-attachment: fixed;
}

[data-color-scheme="dark"] body {
  background-image:
    radial-gradient(1100px 640px at 88% -6%, color-mix(in srgb, var(--accent-500) 22%, transparent), transparent 58%),
    radial-gradient(900px 580px at -4% 102%, color-mix(in srgb, var(--accent-600) 14%, transparent), transparent 55%),
    radial-gradient(600px 400px at 50% 38%, color-mix(in srgb, var(--accent-400) 10%, transparent), transparent 70%),
    linear-gradient(180deg, var(--bg-4) 0%, var(--bg) 38%, color-mix(in srgb, var(--bg-2) 70%, var(--bg)) 100%);
  background-attachment: fixed;
}

/* subtle paper grain overlay — dark only */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
}
[data-color-scheme="dark"] body::before {
  background: var(--paper-tint);
  mix-blend-mode: screen;
  opacity: 0.08;
}

img, svg, canvas, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

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

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0.015em;
  color: var(--text);
}

h1 { font-size: clamp(2.4rem, 5vw, 4.1rem); }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.7rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.7rem); }

@media (max-width: 620px) {
  h1 { font-size: clamp(1.85rem, 8.2vw, 2.55rem); }
  h2 { font-size: clamp(1.45rem, 6vw, 1.95rem); }
  h3 { font-size: clamp(1.15rem, 4.5vw, 1.4rem); }
}

p { color: var(--text-2); }

::selection { background: color-mix(in srgb, var(--wood-light) 45%, transparent); color: var(--text); }
[data-color-scheme="dark"] ::selection { background: color-mix(in srgb, var(--accent-400) 42%, transparent); color: var(--text); }

:focus-visible {
  outline: 2.5px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}
[data-color-scheme="dark"] :focus-visible { outline-color: var(--accent); }

/* Scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
*::-webkit-scrollbar { width: 11px; height: 11px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--line-strong) 80%, transparent);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: padding-box; border: 3px solid transparent; }

.app-root { position: relative; z-index: 1; min-height: 100vh; }

/* Hand-drawn accent text */
.hand, .note {
  font-family: var(--font-hand);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.03em;
  line-height: 1.25;
}

/* Sketchy underline used for emphasis */
.sketch-underline {
  position: relative;
  white-space: nowrap;
}
.sketch-underline::after {
  content: "";
  position: absolute;
  left: -2%;
  right: -2%;
  bottom: -0.14em;
  height: 0.42em;
  background: no-repeat center/100% 100%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='16' viewBox='0 0 240 16'><path d='M2 11 C 40 4, 80 14, 120 8 S 200 3, 238 9' fill='none' stroke='%23c2653f' stroke-width='4' stroke-linecap='round'/></svg>");
  opacity: 0.9;
  z-index: -1;
}

/* Utility */
.u-hidden { display: none !important; }
.u-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.u-center { display: grid; place-items: center; }
.u-row { display: flex; align-items: center; }
.u-col { display: flex; flex-direction: column; }
.u-gap-1 { gap: var(--sp-1); } .u-gap-2 { gap: var(--sp-2); }
.u-gap-3 { gap: var(--sp-3); } .u-gap-4 { gap: var(--sp-4); }
.u-gap-5 { gap: var(--sp-5); }
.u-mt-4 { margin-top: var(--sp-4); } .u-mt-5 { margin-top: var(--sp-5); }
.u-grow { flex: 1 1 auto; min-width: 0; }
.u-wrap { flex-wrap: wrap; }
.u-muted { color: var(--text-3); }
.u-nowrap { white-space: nowrap; }
.u-mono { font-family: var(--font-mono); }
.text-accent { color: var(--accent); }
.text-teal { color: var(--accent-2); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}