/*
 * Styling for the Market4-served blog pages proxied onto this domain.
 *
 * Those pages are complete HTML documents rendered by Market4, so they never
 * pass through the app's layout, Tailwind build or fonts. This sheet is handed
 * to Market4 as stylesheet_url and is the only way that HTML picks up the
 * Paira palette. Values are copied from the @theme block in app/globals.css;
 * they cannot be imported, so keep the two in step by hand.
 */

:root {
  --brand-600: #7c3aed;
  --brand-700: #6d28d9;
  --brand-100: #ede9fe;
  --canvas: #f6f5fb;
  --ink: #0f172a;
  --ink-soft: #475569;
  --ink-faint: #94a3b8;
  --card: #ffffff;
  --radius-card: 1rem;
  --shadow-card: 0 1px 2px rgb(46 16 101 / 0.06), 0 8px 24px -12px rgb(46 16 101 / 0.18);
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #0d0c15;
    --ink: #f8fafc;
    --ink-soft: #cbd5e1;
    --ink-faint: #64748b;
    --card: rgb(15 23 42 / 0.6);
    --brand-600: #a78bfa;
    --brand-700: #c4b5fd;
    --brand-100: #2e1065;
  }
}

body {
  margin: 0;
  padding: 3rem 1rem 5rem;
  background: var(--canvas);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.lm-blog,
.lm-feedback {
  max-width: 44rem;
  margin: 0 auto;
}

.lm-blog-title,
.lm-feedback-heading,
.lm-blog-post-title {
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 1.5rem;
}

.lm-blog-empty,
.lm-feedback-empty {
  color: var(--ink-faint);
  font-weight: 600;
}

.lm-blog a,
.lm-feedback a {
  color: var(--brand-600);
  font-weight: 700;
  text-underline-offset: 2px;
}

.lm-blog a:hover {
  color: var(--brand-700);
}

/* Post list entries and the post body get card treatment, matching the way the
   app sits white cards on a violet-tinted canvas. */
.lm-blog-item,
.lm-blog-post {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}

.lm-blog-item-title {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 0 0 0.5rem;
}

.lm-blog-date,
.lm-blog-item-date,
.lm-feedback-date {
  color: var(--ink-faint);
  font-size: 0.875rem;
  font-weight: 600;
}

.lm-blog-post h2 {
  font-size: 1.5rem;
  font-weight: 800;
  margin-top: 2rem;
}

.lm-blog-post h3 {
  font-size: 1.2rem;
  font-weight: 800;
  margin-top: 1.5rem;
}

.lm-blog-post p,
.lm-blog-post li {
  color: var(--ink-soft);
}

.lm-blog-post img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-card);
}

.lm-blog-post pre {
  overflow-x: auto;
  background: var(--brand-100);
  border-radius: 0.75rem;
  padding: 1rem;
}

.lm-feedback-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}