/* ==========================================================
   Ripium — editorial design system
   Inspired by warm editorial publications (cream paper,
   deep forest ink, subtle texture) with modern app polish.
   ========================================================== */


/* ---- Color tokens (for reference / future use) ---- */
:root {
  --bg: #fdfbf7;         /* warm cream, like aged paper */
  --bg-subtle: #f7f3ec;  /* deeper cream for nested zones */
  --surface: #ffffff;    /* clean white cards */
  --ink: #1c1917;        /* warm near-black (stone-900) */
  --ink-soft: #78716c;   /* stone-500 */
  --line: #e7e5e4;       /* stone-200 */
  --brand: #065f46;      /* deep forest green (emerald-800) */
  --brand-soft: #ecfdf5; /* emerald-50 */
}


/* ---- Typography ---- */

body {
  font-family: 'Geist', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-display {
  font-family: 'Instrument Serif', 'Georgia', serif;
  letter-spacing: -0.015em;
  font-feature-settings: 'ss01', 'ss02';
}

.font-mono {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-feature-settings: 'ss01';
}


/* ---- Scrollbars ---- */

.scrollbar::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar::-webkit-scrollbar-thumb {
  background: #d6d3d1;
  border-radius: 3px;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
  background: #a8a29e;
}


/* ---- Background texture — very subtle paper grain ---- */

.grain {
  background-image:
    radial-gradient(circle at 1px 1px, rgba(28, 25, 23, 0.035) 1px, transparent 0);
  background-size: 24px 24px;
}


/* ---- Selection ---- */

::selection {
  background: #065f46;
  color: #fdfbf7;
}


/* ---- Animations ---- */

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}