/* Boilerform — Andy Bell's form boilerplate docs site (Set Studio).
   Echoes the archived assets/css/main.css: dark #232323 canvas, off-white
   #f3f3f3 text, magenta-purple #a03ea0 accent, Merriweather headings + Muli body,
   and the signature 185px purple underline bar under primary headings. */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@900&family=Mulish:wght@400;600;700&display=swap');

[data-theme="design-boilerform"] { --bf-accent: #a03ea0; --bf-accent-dark: #883588; --bf-ink: #f3f3f3; --bf-bg: #232323; }
[data-theme="design-boilerform"] body { background: #444; color: var(--bf-ink); font-family: "Mulish", "Muli", sans-serif; line-height: 1.4; }
[data-theme="design-boilerform"] .site-header { background: var(--bf-bg); border-bottom: 0; }
[data-theme="design-boilerform"] .nav-logo-text { font-family: "Merriweather", serif; font-weight: 900; letter-spacing: 1px; color: var(--bf-ink); }
[data-theme="design-boilerform"] .nav-links a { color: var(--bf-ink); text-decoration: none; }
[data-theme="design-boilerform"] .nav-links a:hover { color: var(--bf-accent); }
[data-theme="design-boilerform"] .hero { background: var(--bf-bg); min-height: auto; padding: 60px 0 40px; }
[data-theme="design-boilerform"] .hero h1 { font-family: "Merriweather", serif; font-weight: 900; letter-spacing: 1px; font-size: 3.75rem; color: var(--bf-ink); display: inline-block; position: relative; padding-bottom: 20px; }
[data-theme="design-boilerform"] .hero h1::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 185px; height: 5px; background: var(--bf-accent); }
[data-theme="design-boilerform"] .hero-tagline { color: var(--bf-ink); opacity: 0.9; font-size: 1.25rem; }
[data-theme="design-boilerform"] .btn-primary { background: var(--bf-accent); color: var(--bf-ink); border: none; border-radius: 4px; padding: 18px 24px; box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
[data-theme="design-boilerform"] .btn-primary:hover { background: var(--bf-accent-dark); }
[data-theme="design-boilerform"] .btn-outline { background: var(--bf-ink); color: var(--bf-bg); border: none; border-radius: 4px; padding: 18px 24px; }
[data-theme="design-boilerform"] .btn-outline:hover { background: #e2e2e2; }
[data-theme="design-boilerform"] .section-title, [data-theme="design-boilerform"] .page-title { font-family: "Merriweather", serif; font-weight: 900; letter-spacing: 1px; color: var(--bf-ink); display: inline-block; position: relative; padding-bottom: 20px; }
[data-theme="design-boilerform"] .section-title::after, [data-theme="design-boilerform"] .page-title::after { content: ""; display: block; position: absolute; left: 0; bottom: 0; width: 185px; height: 5px; background: var(--bf-accent); }
[data-theme="design-boilerform"] .card { background: #2b2b2b; border: 1px solid #3a3a3a; border-radius: 4px; }
[data-theme="design-boilerform"] .card-img { display: none; }
[data-theme="design-boilerform"] .card-title a { font-family: "Merriweather", serif; color: var(--bf-ink); }
[data-theme="design-boilerform"] .card-title a:hover { color: var(--bf-accent); }
[data-theme="design-boilerform"] .card-excerpt { color: #cfcfcf; }
[data-theme="design-boilerform"] .badge { background: var(--bf-accent); color: var(--bf-ink); border-radius: 2px; letter-spacing: 0.5px; }
[data-theme="design-boilerform"] .article-layout { max-width: 75ch; }
[data-theme="design-boilerform"] .article-header h1 { font-family: "Merriweather", serif; font-weight: 900; letter-spacing: 1px; color: var(--bf-ink); }
[data-theme="design-boilerform"] .article-body { font-size: 1.15rem; line-height: 1.7; }
[data-theme="design-boilerform"] .article-body a { color: var(--bf-accent); }
[data-theme="design-boilerform"] .article-body code { background: #e5e5e5; color: #232323; padding: 2px 4px; border-radius: 2px; }
[data-theme="design-boilerform"] .article-body pre { background: #1a1a1a; color: #f3f3f3; padding: 16px; border-radius: 4px; overflow-x: auto; }
[data-theme="design-boilerform"] .article-body pre code { background: transparent; color: inherit; }
[data-theme="design-boilerform"] .site-footer { background: var(--bf-bg); border-top: 1px solid #3a3a3a; color: var(--bf-ink); }
[data-theme="design-boilerform"] .footer-links a { color: var(--bf-ink); }
[data-theme="design-boilerform"] .footer-links a:hover { color: var(--bf-accent); }