/*!********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/blog-tokens.css ***!
  \********************************************************************************************************************************************************************************************************************************************************************/
/* ─── Blog Light Theme Tokens ──────────────────────────────────
   Scoped to .blog-theme so it doesn't leak into the rest of the site.
   Dark mirror via prefers-color-scheme for readers in dark mode.
   ─────────────────────────────────────────────────────────────── */

.blog-theme {
  /* Canvas & surface */
  --blog-bg: #FFFFFF;
  --blog-bg-subtle: #F6F8FC;
  --blog-surface: #FFFFFF;

  /* Ink (brand navy as text) */
  --blog-ink: #0B1F42;
  --blog-text: #1E2A44;
  --blog-text-muted: #5A6B8C;

  /* Accent */
  --blog-accent: #2C6FE3;
  --blog-accent-hover: #1D5BC2;

  /* Channel accents */
  --blog-calls: #2C6FE3;
  --blog-whatsapp: #1FAE5A;
  --blog-email: #E08A00;
  --blog-sms: #6A4CFF;

  /* Lines & elevation */
  --blog-hairline: rgba(11, 31, 66, 0.10);
  --blog-shadow-sm: 0 1px 2px rgba(11, 31, 66, 0.06);
  --blog-shadow-md: 0 8px 30px rgba(11, 31, 66, 0.08);

  /* Feedback */
  --blog-success: #178A60;

  /* Reading measure */
  --blog-measure: 68ch;

  /* Apply light theme defaults */
  background-color: var(--blog-bg);
  color: var(--blog-text);
}

/* ─── Dark mirror ─────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  .blog-theme {
    --blog-bg: #0B1F42;
    --blog-bg-subtle: #102A54;
    --blog-surface: #132E58;

    --blog-ink: #F5F8FF;
    --blog-text: #E0E7F2;
    --blog-text-muted: #A9BBDA;

    --blog-accent: #5B9BF5;
    --blog-accent-hover: #7DB3FF;

    --blog-calls: #5B9BF5;
    --blog-whatsapp: #3BE8B0;
    --blog-email: #FFB454;
    --blog-sms: #A98AFF;

    --blog-hairline: rgba(245, 248, 255, 0.10);
    --blog-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.20);
    --blog-shadow-md: 0 8px 30px rgba(0, 0, 0, 0.30);

    --blog-success: #3BE8B0;
  }
}

/* ─── Reading typography ──────────────────────────────────────── */
.blog-prose {
  font-size: 1.125rem;    /* 18px */
  line-height: 1.7;
  max-width: var(--blog-measure);
  color: var(--blog-text);
}

.blog-prose h1,
.blog-prose h2,
.blog-prose h3,
.blog-prose h4 {
  color: var(--blog-ink);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}

.blog-prose h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  margin-bottom: 1rem;
}

.blog-prose h2 {
  font-size: clamp(1.5rem, 3vw, 1.875rem);
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--blog-hairline);
}

.blog-prose h3 {
  font-size: 1.25rem;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.blog-prose p {
  margin-bottom: 1.25rem;
}

.blog-prose strong {
  color: var(--blog-ink);
  font-weight: 600;
}

/* Links */
.blog-prose a {
  color: var(--blog-accent);
  text-decoration: none;
  transition: color 0.15s ease;
}
.blog-prose a:hover,
.blog-prose a:focus-visible {
  color: var(--blog-accent-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Blockquotes */
.blog-prose blockquote {
  border-left: 3px solid var(--blog-accent);
  background: var(--blog-bg-subtle);
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
  font-style: normal;
}

.blog-prose blockquote p {
  margin-bottom: 0;
}

/* Lists */
.blog-prose ul {
  list-style: none;
  padding-left: 0;
  margin-bottom: 1.25rem;
}

.blog-prose ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.blog-prose ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blog-accent);
}

.blog-prose ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.blog-prose ol li {
  margin-bottom: 0.5rem;
  padding-left: 0.25rem;
}

.blog-prose ol li::marker {
  color: var(--blog-accent);
  font-weight: 600;
}

/* Code */
.blog-prose code {
  font-family: var(--font-jetbrains), monospace;
  font-size: 0.875em;
  background: var(--blog-bg-subtle);
  padding: 0.15em 0.4em;
  border-radius: 4px;
  color: var(--blog-ink);
}

.blog-prose pre {
  background: var(--blog-bg-subtle);
  padding: 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  margin-bottom: 1.5rem;
  border: 1px solid var(--blog-hairline);
}

.blog-prose pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
}

/* Tables (within prose) */
.blog-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: 0.95rem;
}

.blog-prose th {
  text-align: left;
  padding: 0.75rem 1rem;
  background: var(--blog-bg-subtle);
  color: var(--blog-ink);
  font-weight: 600;
  border-bottom: 2px solid var(--blog-hairline);
}

.blog-prose td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--blog-hairline);
}

.blog-prose tr:last-child td {
  border-bottom: none;
}

/* Horizontal rule */
.blog-prose hr {
  border: none;
  border-top: 1px solid var(--blog-hairline);
  margin: 2.5rem 0;
}

/* Images */
.blog-prose img {
  border-radius: 8px;
  margin: 1.5rem 0;
}

/* ─── Reduced motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .blog-theme *,
  .blog-theme *::before,
  .blog-theme *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}