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

:root {
  --bg: oklch(96.8% 0.012 75);
  --bg-card: oklch(98.5% 0.008 75);
  --ink: oklch(22% 0.012 55);
  --ink-mid: oklch(48% 0.010 60);
  --ink-faint: oklch(70% 0.008 65);
  --ink-ghost: oklch(84% 0.006 68);
  --yar: oklch(50% 0.09 240);
  --yar-bg: oklch(93% 0.03 240);
  --mar: oklch(56% 0.10 42);
  --mar-bg: oklch(94% 0.04 50);
  --serif: 'Cormorant Garamond', Georgia, serif;
  --display: 'Oswald', sans-serif;
  --sans: 'DM Sans', system-ui, sans-serif;
}

html {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

body {
  min-height: 100vh;
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ink-ghost); border-radius: 2px; }

::selection    { background: rgba(201, 139, 3, 0.5); color: black; }
::-moz-selection { background: rgba(201, 139, 3, 0.5); color: black; }

@media (max-width: 768px) {
  body { font-size: 15px; }
}