/* ============================================================
   base.css
   Shared design tokens used by both index.html and book.html.
   Colors, fonts, and reset rules live here so a future palette
   or font change only needs to happen in ONE place.
   ============================================================ */

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

:root {
  --mauve:        #7a4f65;
  --mauve-mid:    #9e7585;
  --mauve-light:  #bfa0aa;
  --mauve-middle: #c8afb7;
  --mauve-pale:   #d5bec3;
  --mauve-softer: #e4d3d7;
  --blush:        #eedee2;
  --blush-soft:   #f3e7e6;
  --cream:        #f8f2f0;
  --white:        #fdfbfa;
  --mauve-darker:  #3e2232;
  --mauve-dark:    #5c3549;
  --mauve-muted:   #a38a8f;
  --mauve-border:  #c9a8b4;
  --mauve-tint:    #ddc8cc;
  --blush-hover:   #fce8ec;
  --error:         #d10000;

  --font-display: 'Cormorant Garamond', serif;
  --font-body:    'Roboto', system-ui, -apple-system, sans-serif;

  --icon-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23a38a8f'/%3E%3C/svg%3E");
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
}

html, body {
  width: 100%;
  overflow-x: hidden;
}

body {
  background: var(--blush-soft);
  color: var(--mauve);
  font-family: var(--font-body);
  font-weight: 300;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}