/* ============================================================
   Lepus Journal — Landing theme
   Tokens copied 1:1 from the app design system (DESIGN.md / index.css)
   ============================================================ */
/* ---------- PALETTE: Cream (default) ---------- */
:root {
  --radius-card: 20px;
  --radius-pill: 26px;
  --shadow-card: 0 12px 30px rgba(40, 25, 15, 0.16);
  --shadow-soft: 0 1px 2px rgba(40, 25, 15, 0.06);
  --shadow-fab: 0 10px 24px rgba(128, 145, 109, 0.40);
  --surface-glass: rgba(253, 248, 241, 0.6);

  --color-bg-base:      oklch(98.1% 0.011 76.6);
  --color-bg-deep:      oklch(94.6% 0.016 79.0);
  --color-surface-warm: oklch(78.0% 0.047 71.3);
  --color-primary:      oklch(50.7% 0.054 125.3);
  --color-primary-text: oklch(98.1% 0.011 76.6);
  --color-accent:       oklch(40.8% 0.058 111.3);
  --color-accent-text:  oklch(98.1% 0.011 76.6);
  --color-text-deep:    oklch(39.2% 0.061 41.7);
  --color-text-muted:   oklch(50.7% 0.076 41.7);
  --color-border:       oklch(78.0% 0.047 71.3 / 0.50);
  --color-hover:        oklch(94.2% 0.012 79.8);
  --color-danger:       oklch(49.7% 0.18 26.8);
  --color-warning:      oklch(73.1% 0.115 85.0);
  --color-focus-ring:   var(--color-primary);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Source Serif 4', Georgia, serif;

  --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background-color: var(--color-bg-base);
  color: var(--color-text-deep);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .4s ease, color .4s ease;
}

::selection { background: color-mix(in oklch, var(--color-primary) 28%, transparent); }

/* ---------- Typography ---------- */
.font-display { font-family: var(--font-display); font-weight: 500; }
.font-body { font-family: var(--font-body); }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--color-text-deep); line-height: 1.12; letter-spacing: -0.01em; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.book-title { font-family: var(--font-body); font-style: italic; font-weight: 500; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-body); font-size: 16px; font-weight: 600;
  padding: 13px 26px; border-radius: var(--radius-pill);
  border: 1px solid transparent; cursor: pointer;
  text-decoration: none; white-space: nowrap;
  transition: transform .15s var(--ease-out-expo), background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background-color: var(--color-primary); color: var(--color-primary-text);
  box-shadow: var(--shadow-fab);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 30px color-mix(in oklch, var(--color-primary) 45%, transparent); }

.btn-ghost {
  background-color: transparent; color: var(--color-text-deep);
  border-color: var(--color-border);
}
.btn-ghost:hover { background-color: var(--color-hover); border-color: var(--color-surface-warm); }

.btn-google {
  background-color: var(--color-bg-base); color: var(--color-text-deep);
  border-color: var(--color-border); box-shadow: var(--shadow-soft);
}
.btn-google:hover { background-color: var(--color-hover); transform: translateY(-1px); }

/* ---------- Chips ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  background-color: color-mix(in oklch, var(--color-surface-warm) 32%, transparent);
  color: var(--color-text-deep);
  border-radius: var(--radius-pill);
  padding: 7px 15px; font-size: 13.5px; font-weight: 500;
  border: 1px solid var(--color-border);
}

/* ---------- Card ---------- */
.card {
  background-color: var(--color-bg-base);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* ---------- Textures ---------- */
.texture-paper {
  background-image: url("/assets/textures/paper.webp");
  background-size: 240px 240px; background-repeat: repeat;
}
.surface-paper {
  background-color: var(--color-surface-warm);
  background-image: linear-gradient(var(--surface-glass), var(--surface-glass)), url("/assets/textures/paper.webp");
  background-size: auto, 200px 200px; background-repeat: no-repeat, repeat;
}
.hand-drawn { mix-blend-mode: multiply; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}

/* ---------- Focus ---------- */
:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 3px; border-radius: 6px; }

/* ---------- Scrollbar ---------- */
* { scrollbar-width: thin; scrollbar-color: var(--color-surface-warm) transparent; }
*::-webkit-scrollbar { width: 5px; height: 5px; }
*::-webkit-scrollbar-thumb { background: var(--color-surface-warm); border-radius: 3px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---------- Wax seal (signature component) ---------- */
.wax-seal {
  background-color: var(--color-danger);
  border-radius: 48% 52% 50% 50% / 50% 48% 52% 50%;
  box-shadow: inset 0 2px 4px rgba(255,255,255,0.3), inset 0 -2px 4px rgba(0,0,0,0.5), 2px 4px 8px rgba(0,0,0,0.25);
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 215, 0, 0.78); position: relative;
}
.wax-seal::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(0,0,0,0.12); border-radius: inherit; }