:root {
  --ink-950: #0d1016;
  --ink-900: #121722;
  --ink-850: #171d2b;
  --ink-800: #1d2433;
  --gold-500: #d6a74f;
  --gold-400: #efc76d;
  --gold-300: #f8d98b;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  font-family: "Inter", "Roboto", ui-sans-serif, system-ui, -apple-system, Segoe UI, sans-serif;
  color: #eef2ff;
  background:
    radial-gradient(circle at top, rgba(214, 167, 79, 0.16), transparent 34%),
    radial-gradient(circle at 80% 8%, rgba(255, 255, 255, 0.06), transparent 32%),
    linear-gradient(180deg, var(--ink-950) 0%, var(--ink-900) 58%, var(--ink-850) 100%);
}

a {
  text-decoration: none;
}

.surface-card {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(12, 16, 24, 0.75);
  box-shadow: 0 24px 72px rgba(0, 0, 0, 0.32);
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reader-surface[data-theme="midnight"] {
  background: linear-gradient(180deg, #0f141f 0%, #151d2a 100%);
  color: #f8f8f5;
}

.reader-surface[data-theme="sepia"] {
  background: linear-gradient(180deg, #f0e7d6 0%, #e8dcc8 100%);
  color: #2f2416;
}

.reader-surface[data-theme="slate"] {
  background: linear-gradient(180deg, #1b2230 0%, #252f41 100%);
  color: #f2f5fb;
}

.active-nav {
  color: var(--gold-300);
}

.mobile-safe-padding {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
}

.bottom-safe-bar {
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}