/* Mr Biscuit — playful Figma-tooling portfolio: cream base, Figma-blue + biscuit-yellow accents, Inter type */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;800;900&family=Inconsolata:wght@400;600&display=swap');

[data-theme="design-mrbiscuit"] { --mb-cream: #fffdf2; --mb-ink: #050505; --mb-blue: #0d99ff; --mb-yellow: #ffdf61; --mb-line: #ececdf; }
[data-theme="design-mrbiscuit"] body { background: var(--mb-cream); color: var(--mb-ink); font-family: "Inter", -apple-system, "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; }

[data-theme="design-mrbiscuit"] .site-header { background: rgba(255,253,242,0.9); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--mb-line); }
[data-theme="design-mrbiscuit"] .nav-logo-text { font-weight: 900; letter-spacing: -0.02em; color: var(--mb-ink); }
[data-theme="design-mrbiscuit"] .nav-links a { color: var(--mb-ink); font-weight: 500; font-size: 0.95rem; }
[data-theme="design-mrbiscuit"] .nav-links a:hover { color: var(--mb-blue); }

[data-theme="design-mrbiscuit"] .hero { background: var(--mb-cream); padding: 80px 0 48px; min-height: auto; }
[data-theme="design-mrbiscuit"] .hero h1 { font-weight: 900; font-size: clamp(2.4rem, 5.5vw, 4rem); line-height: 1.04; letter-spacing: -0.035em; color: var(--mb-ink); }
[data-theme="design-mrbiscuit"] .hero h1 em, [data-theme="design-mrbiscuit"] .hero .section-title span { font-style: normal; background: var(--mb-yellow); box-shadow: 0 0 0 4px var(--mb-yellow); border-radius: 2px; }
[data-theme="design-mrbiscuit"] .hero-tagline { color: #4a4c4f; font-size: 1.15rem; max-width: 34em; }

[data-theme="design-mrbiscuit"] .btn-primary { background: var(--mb-blue); border: 0; color: #fff; border-radius: 999px; font-weight: 600; padding: 12px 26px; }
[data-theme="design-mrbiscuit"] .btn-primary:hover { background: #006adc; }
[data-theme="design-mrbiscuit"] .btn-outline { border: 1.5px solid var(--mb-ink); color: var(--mb-ink); border-radius: 999px; font-weight: 600; }

[data-theme="design-mrbiscuit"] .section-title, [data-theme="design-mrbiscuit"] .page-title { font-weight: 800; letter-spacing: -0.03em; color: var(--mb-ink); }
[data-theme="design-mrbiscuit"] .card { background: #fff; border: 1px solid var(--mb-line); border-radius: 16px; box-shadow: 0 1px 0 rgba(5,5,5,0.03); }
[data-theme="design-mrbiscuit"] .card-img { border-radius: 12px 12px 0 0; }
[data-theme="design-mrbiscuit"] .card-title a { color: var(--mb-ink); font-weight: 700; letter-spacing: -0.02em; }
[data-theme="design-mrbiscuit"] .card-title a:hover { color: var(--mb-blue); }
[data-theme="design-mrbiscuit"] .card-excerpt { color: #56585c; }
[data-theme="design-mrbiscuit"] .badge { background: var(--mb-yellow); color: var(--mb-ink); border-radius: 999px; font-weight: 600; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 11px; }

[data-theme="design-mrbiscuit"] .article-layout { max-width: 720px; }
[data-theme="design-mrbiscuit"] .article-header h1 { font-weight: 900; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: -0.035em; }
[data-theme="design-mrbiscuit"] .article-body { font-size: 1.08rem; line-height: 1.75; color: #1a1b1c; }
[data-theme="design-mrbiscuit"] .article-body code, [data-theme="design-mrbiscuit"] .article-body kbd { font-family: "Inconsolata", ui-monospace, monospace; background: #fff6d1; border-radius: 4px; padding: 1px 5px; }
[data-theme="design-mrbiscuit"] .article-body a { color: var(--mb-blue); }

[data-theme="design-mrbiscuit"] .site-footer { background: var(--mb-ink); color: #d7dade; border-top: 3px solid var(--mb-yellow); }
[data-theme="design-mrbiscuit"] .footer-links a { color: #d7dade; }
[data-theme="design-mrbiscuit"] .footer-links a:hover { color: var(--mb-yellow); }