/* ============================================
   Custom styles — merged from all Stitch pages
   Only what Tailwind can't handle
   ============================================ */

/* --- Base typography (from homepage + blog post) --- */
body {
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: #1a1a1a;
  background-color: #ffffff;
  line-height: 1.75;
}

/* --- Homepage: prose + essay hover (from homepage_strategic_discrete) --- */
.prose-text {
  line-height: 1.7;
  letter-spacing: -0.01em;
}
.essay-link:hover .essay-title {
  text-decoration: underline;
}

/* --- Consulting: service card + CTA link (from consulting_strategic_discrete) --- */
.service-card {
  transition: border-color 0.3s ease;
}
.service-card:hover {
  border-color: #BAE6FD;
}
.cta-link {
  position: relative;
  text-decoration: none;
}
.cta-link::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: -2px;
  left: 0;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: bottom right;
  transition: transform 0.3s ease-out;
}
.cta-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}

/* --- Writing: archive item hover (from writing_archive_discrete) --- */
.archive-item {
  transition: all 0.2s ease-in-out;
}
.archive-item:hover .item-title {
  color: #0070f3;
}

/* --- About: philosophy text (from about_narrative_focused) --- */
.philosophy-text {
  text-wrap: balance;
}

/* --- Blog post: long-form typography (from blog_post_book_like) --- */
blockquote {
  border-left: 3px solid #0077cc;
  padding-left: 1.5rem;
  font-style: italic;
  color: #4b5563;
}
pre {
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  padding: 1.5rem;
  border-radius: 4px;
  overflow-x: auto;
  margin-bottom: 2rem;
}
code {
  font-family: 'ui-monospace', 'SFMono-Regular', Menlo, Monaco, Consolas, monospace;
  font-size: 0.9em;
}

/* --- Selection (from writing_archive_discrete) --- */
::selection {
  background: rgba(0, 112, 243, 0.1);
  color: #0070f3;
}

/* --- Theme Toggle --- */
.theme-toggle {
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: #a3a3a3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  transition: color 150ms ease;
}
.theme-toggle:hover { color: #171717; }
.theme-toggle svg { width: 1.125rem; height: 1.125rem; }

/* --- View Transitions --- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 200ms ease-out both fadeOut; }
::view-transition-new(root) { animation: 300ms ease-in both fadeIn; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body {
    background-color: #0f172a;
    color: #f1f5f9;
  }
  :root:not([data-theme="light"]) .theme-toggle { color: #64748b; }
  :root:not([data-theme="light"]) .theme-toggle:hover { color: #f1f5f9; }
  :root:not([data-theme="light"]) .archive-item:hover .item-title { color: #38bdf8; }
  :root:not([data-theme="light"]) .service-card:hover { border-color: #38bdf8; }
  :root:not([data-theme="light"]) ::selection { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }
}

[data-theme="dark"] body {
  background-color: #0f172a;
  color: #f1f5f9;
}
[data-theme="dark"] .theme-toggle { color: #64748b; }
[data-theme="dark"] .theme-toggle:hover { color: #f1f5f9; }
[data-theme="dark"] .archive-item:hover .item-title { color: #38bdf8; }
[data-theme="dark"] .service-card:hover { border-color: #38bdf8; }
[data-theme="dark"] ::selection { background: rgba(56, 189, 248, 0.2); color: #38bdf8; }