/* ============================================================
   NotionEdge.AI — Premium Editorial Design System
   Dual-mode: warm "paper" editorial surfaces + "obsidian" moments.
   Loaded after Tailwind CDN; defines tokens + component classes.
   ============================================================ */

:root {
  /* Ink — warm near-blacks for text on paper */
  --ink:        #1a1714;
  --ink-soft:   #57534e;
  --ink-faint:  #8a847c;

  /* Paper — warm off-white editorial surfaces */
  --paper:        #f6f4f0;
  --paper-raised: #ffffff;
  --paper-sunk:   #efece6;

  /* Obsidian — dark hero / product moments */
  --obsidian:      #0b0a09;
  --obsidian-soft: #14110d;
  --obsidian-line: rgba(255, 255, 255, 0.08);

  /* Hairlines */
  --line:        rgba(26, 23, 20, 0.10);
  --line-strong: rgba(26, 23, 20, 0.18);

  /* Accent — deep violet, used sparingly */
  --accent:      #5b21b6;
  --accent-soft: #7c3aed;

  --shadow-card: 0 1px 2px rgba(26, 23, 20, 0.04),
                 0 8px 24px rgba(26, 23, 20, 0.06);
  --shadow-lift: 0 2px 4px rgba(26, 23, 20, 0.06),
                 0 18px 48px rgba(26, 23, 20, 0.12);
}

/* ---------- Font families ---------- */
.font-display { font-family: 'Playfair Display', Georgia, serif !important; }
.font-sans    { font-family: 'Geist', ui-sans-serif, system-ui, sans-serif !important; }
.font-mono    { font-family: 'Geist Mono', ui-monospace, monospace !important; }

/* ---------- Surfaces ---------- */
.surface-paper        { background-color: var(--paper); color: var(--ink); }
.surface-paper-raised { background-color: var(--paper-raised); color: var(--ink); }
.surface-paper-sunk   { background-color: var(--paper-sunk); color: var(--ink); }
.surface-obsidian     { background-color: var(--obsidian); color: #f4f2ee; }

/* ---------- Typography helpers ---------- */
.eyebrow {
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
}
.eyebrow-light { color: rgba(244, 242, 238, 0.55); }
.eyebrow-accent { color: var(--accent); }

.display {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.display-light { color: #faf9f7; }

.lede {
  font-family: 'Geist', sans-serif;
  color: var(--ink-soft);
  line-height: 1.65;
}
.lede-light { color: rgba(244, 242, 238, 0.7); }

.text-ink       { color: var(--ink); }
.text-ink-soft  { color: var(--ink-soft); }
.text-ink-faint { color: var(--ink-faint); }
.text-accent    { color: var(--accent); }

/* Italic serif accent for editorial emphasis */
.display em, .accent-italic {
  font-style: italic;
  font-family: 'Playfair Display', Georgia, serif;
}

/* ---------- Hairlines ---------- */
.hairline        { border-color: var(--line) !important; }
.hairline-strong { border-color: var(--line-strong) !important; }
.hairline-light  { border-color: var(--obsidian-line) !important; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-family: 'Geist', sans-serif;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.875rem 1.5rem;
  border-radius: 2px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}
.btn-ink {
  background: var(--ink);
  color: var(--paper-raised);
  border: 1px solid var(--ink);
}
.btn-ink:hover {
  background: #000;
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}
.btn-paper {
  background: #faf9f7;
  color: var(--ink);
  border: 1px solid #faf9f7;
}
.btn-paper:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-outline:hover { border-color: var(--ink); }
.btn-outline-light {
  background: transparent;
  color: #f4f2ee;
  border: 1px solid var(--obsidian-line);
}
.btn-outline-light:hover { border-color: rgba(255, 255, 255, 0.5); }

/* ---------- Cards ---------- */
.card {
  background: var(--paper-raised);
  border: 1px solid var(--line);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.35s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--line-strong);
}
.card-obsidian {
  background: var(--obsidian-soft);
  border: 1px solid var(--obsidian-line);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-obsidian:hover { border-color: rgba(124, 58, 237, 0.35); }

/* ---------- Animated link underline ---------- */
.link-underline {
  position: relative;
  color: var(--ink);
  text-decoration: none;
}
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.link-underline:hover::after { transform: scaleX(1); }

/* ---------- Nav (editorial) ---------- */
.nav-link {
  font-family: 'Geist', sans-serif;
  font-size: 0.8125rem;
  font-weight: 450;
  color: var(--ink-soft);
  letter-spacing: 0.005em;
  transition: color 0.2s ease;
}
.nav-link:hover { color: var(--ink); }

/* ---------- Editorial rule with label ---------- */
.section-marker {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.section-marker::before,
.section-marker::after {
  content: "";
  height: 1px;
  background: var(--line);
  flex: 1;
}

/* ---------- Intro animation ---------- */
@keyframes editorialIn {
  0%   { opacity: 0; transform: translateY(24px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
.reveal { animation: editorialIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* on-scroll reveal (paired with the IntersectionObserver script) */
.animate-on-scroll { opacity: 0; }
.animate-on-scroll.animate {
  animation: editorialIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---------- Marquee (testimonials) ---------- */
.marquee-mask {
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 48s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

/* ---------- Sticky workflow indicators ---------- */
.step-indicator { transition: all 0.5s ease; background: var(--line-strong); }
.step-indicator.active { background: var(--ink); }
.step-text { transition: color 0.5s ease; color: var(--ink-faint); }
.step-trigger.active .step-text { color: var(--ink); }

/* ---------- Editorial long-form prose ---------- */
.prose-editorial { color: var(--ink-soft); font-size: 1.0625rem; line-height: 1.75; }
.prose-editorial > * + * { margin-top: 1.5rem; }
.prose-editorial p { color: var(--ink-soft); }
.prose-editorial p.lead {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.5rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 2.5rem;
}
.prose-editorial h2 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.875rem;
  line-height: 1.2;
  color: var(--ink);
  margin-top: 3rem;
  margin-bottom: 1.25rem;
  letter-spacing: -0.01em;
}
.prose-editorial h3 {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.375rem;
  color: var(--ink);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
}
.prose-editorial strong { color: var(--ink); font-weight: 600; }
.prose-editorial a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.prose-editorial ul, .prose-editorial ol { padding-left: 1.25rem; }
.prose-editorial ul { list-style: none; padding-left: 0; }
.prose-editorial ul > li {
  position: relative;
  padding-left: 1.5rem;
  margin-top: 0.75rem;
  color: var(--ink-soft);
}
.prose-editorial ul > li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.7em;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 1px;
}
.prose-editorial ol { list-style: decimal; }
.prose-editorial ol > li { margin-top: 0.75rem; padding-left: 0.25rem; }
.prose-editorial blockquote {
  border-left: 2px solid var(--accent);
  padding-left: 1.5rem;
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-size: 1.375rem;
  color: var(--ink);
}
.prose-editorial pre {
  background: var(--obsidian-soft);
  color: #d6d3cd;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 1.25rem;
  overflow-x: auto;
  font-family: 'Geist Mono', monospace;
  font-size: 0.85rem;
  line-height: 1.6;
}
.prose-editorial code {
  font-family: 'Geist Mono', monospace;
  font-size: 0.9em;
  background: var(--paper-sunk);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}
.prose-editorial pre code { background: none; padding: 0; }
.prose-editorial img { border-radius: 4px; border: 1px solid var(--line); }

/* ---------- Misc ---------- */
iconify-icon { display: inline-block; vertical-align: middle; }
::selection { background: rgba(91, 33, 182, 0.16); }
html { scroll-behavior: smooth; }