/* Spineless - ultramarine, highlighter yellow, hard black rules.
   Ported from design-ref/ebook-library-v2.html (light-native; dark authored here). */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,800&family=Instrument+Sans:wght@400;500;700&display=swap");

:root {
    --bg: #FDFDFB;
    --surface: #FFFFFF;
    --surface-2: #F0F0EC;
    --ink: #101014;
    --ink-soft: #5A5A64;
    --accent: #2B2BD6;
    --accent-deep: #1B1B9E;
    --line: #101014;
    --line-soft: rgba(16, 16, 20, .18);

    --font-display: "Bricolage Grotesque", sans-serif;
    --font-body: "Instrument Sans", sans-serif;
    --radius: 0px;

    --k1: #2B2BD6; --k1-ink: #FDFDFB;
    --k2: #FF8DA1; --k2-ink: #101014;
    --k3: #8FE3C0; --k3-ink: #101014;
    --k4: #F2E838; --k4-ink: #101014;
    --k5: #101014; --k5-ink: #F2E838;
    --k6: #1B1B9E; --k6-ink: #FDFDFB;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0B0B0F; --surface: #141419; --surface-2: #1D1D24;
        --ink: #F4F4F0; --ink-soft: #9A9AA4;
        --accent: #6E6EFF; --accent-deep: #4A4AE8;
        --line: #F4F4F0; --line-soft: rgba(244, 244, 240, .2);
        --k1: #4A4AE8; --k5: #F2E838; --k5-ink: #101014;
    }
}

:root[data-theme="dark"] {
    --bg: #0B0B0F; --surface: #141419; --surface-2: #1D1D24;
    --ink: #F4F4F0; --ink-soft: #9A9AA4;
    --accent: #6E6EFF; --accent-deep: #4A4AE8;
    --line: #F4F4F0; --line-soft: rgba(244, 244, 240, .2);
    --k1: #4A4AE8; --k5: #F2E838; --k5-ink: #101014;
}

:root[data-theme="light"] {
    --bg: #FDFDFB; --surface: #FFFFFF; --surface-2: #F0F0EC;
    --ink: #101014; --ink-soft: #5A5A64;
    --accent: #2B2BD6; --accent-deep: #1B1B9E;
    --line: #101014; --line-soft: rgba(16, 16, 20, .18);
    --k1: #2B2BD6; --k5: #101014; --k5-ink: #F2E838;
}

/* ---- theme character: brutalist rules, no radii, hard offset shadows ---- */

h1 { font-weight: 800; letter-spacing: -.03em; line-height: 1.02; }
h2, h3 { font-weight: 700; letter-spacing: -.02em; }

.site-nav, .z-search, .featured, .bl, .post, .cat-grid { border-width: 2px; }
.z-search, .featured, .bl, .post { box-shadow: 6px 6px 0 var(--ink); }
.bl:hover, .post:hover { box-shadow: 10px 10px 0 var(--accent); transform: translate(-3px, -3px); }
.cover { border: 2px solid var(--ink); }
.book-card .cover, .feat-cover, .bd-cover { box-shadow: 6px 6px 0 var(--ink); }
.brand-mark { border-radius: 0; }

/* The lede gets the highlighter treatment the mockup uses on its headline. */
.hero h1 .accent { background: #F2E838; color: #101014; padding: 0 .12em; }
.mode-toggle button, .nav-cta, .zs-main button, .btn-ink, .btn-ghost { border-radius: 0; }