:root {
    --brand-orange: #F26322;
    /* Magento orange */
    --brand-blue: #2563eb;
    /* Tailwind blue-600 */
    --terminal-bg: #0b1220;
    /* deep navy */
}

/* Focus rings */
:focus-visible {
    outline: 2px solid var(--brand-blue);
    outline-offset: 2px
}

.cta:focus-visible {
    outline-color: var(--brand-orange)
}

/* Terminal-style code blocks */
pre {
    background: var(--terminal-bg);
    color: #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    box-shadow: 0 1px 8px rgba(2, 6, 23, .35);
}

pre code {
    color: inherit;
    font: inherit
}

/* Inline code (light) */
:not(pre)>code {
    background: #f8fafc;
    color: #1f2937;
    border: 1px solid #e5e7eb;
    padding: .125rem .375rem;
    border-radius: .375rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: .925em;
}

.mb-rule-body {display:block; max-width:900px}
.mb-h3 {margin:1.25rem 0 .5rem; font-weight:700; font-size:1.125rem}
.mb-h4 {margin:.75rem 0 .25rem; font-weight:600}
.mb-p {margin:.5rem 0}
.mb-pre {padding:.75rem; border-radius:.5rem; overflow:auto; font-size:.9em}
.mb-ol, .mb-ul {padding-left:1.25rem}
.mb-examples {display:grid; gap:.75rem}
.mb-example {border:1px solid #e5e7eb33; border-radius:.5rem; padding:.5rem}
.mb-chip {display:inline-block; font-size:.75rem; padding:.1rem .5rem; border-radius:9999px; margin-bottom:.25rem}
.mb-chip-bad {background:#fee2e2; color:#991b1b}
.mb-chip-good {background:#dcfce7; color:#065f46}

.clamp-3{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}

/* Light mode blog styles – self-contained (same as other posts) */
.article-shell { background:#f8fafc; }
.article-card  { background:#fff; border:1px solid #e5e7eb; border-radius:16px; box-shadow:0 1px 2px rgba(0,0,0,.03); }
.article-meta  { color:#6b7280; text-transform:uppercase; letter-spacing:.12em; font-size:.75rem; text-align:center; }
.article-title { color:#1e3a8a; text-align:center; } /* text-blue-900 */
.reading-width { max-width:48rem; margin-inline:auto; }
.article-content p { margin-top:1rem; line-height:1.8; color:#374151; }
.article-content h2 { margin-top:2rem; margin-bottom:.5rem; font-weight:700; font-size:1.25rem; color:#111827; }
.article-content h3 { margin-top:1.5rem; margin-bottom:.25rem; font-weight:600; color:#111827; }
.article-content ul, .article-content ol { margin-top:1rem; margin-left:1.25rem; color:#374151; }
.article-content li { margin:.4rem 0; }
.article-content blockquote { margin-top:1rem; padding-left:1rem; border-left:4px solid #e5e7eb; color:#6b7280; font-style:italic; }