# ZABA & ZINGO — CSS (paste-ready)
> Drop `zz.css` (below) into any ZZ project. Self-hosted fonts, both themes, all tokens.
> Toggle theme with `data-theme="light"` on `` (dark is the default `:root`).
---
## `zz.css`
```css
/* ============ ZABA & ZINGO — canonical stylesheet v1.0.0 ============ */
/* --- fonts (self-hosted) --- */
@font-face{font-family:"Zaba Logo";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"Noto Serif Display ExtraCondensed";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-ExtraLight.ttf") format("truetype");font-weight:200;font-display:swap}
@font-face{font-family:"Noto Serif Display ExtraCondensed";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-Regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:"Noto Serif Display ExtraCondensed";src:url("/fonts/NotoSerifDisplay_ExtraCondensed-Bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Semibold.otf") format("opentype");font-weight:600;font-display:swap}
@font-face{font-family:"PP Neue Montreal";src:url("/fonts/PPNeueMontreal-Bold.otf") format("opentype");font-weight:700;font-display:swap}
/* --- tokens: dark (default) --- */
:root{
--zz-display:"Noto Serif Display ExtraCondensed",serif;
--zz-logo:"Zaba Logo","Noto Serif Display ExtraCondensed",serif;
--zz-sans:"PP Neue Montreal",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--zz-bg:#22201f; --zz-bg-deep:#141311; --zz-panel:#1c1b18; --zz-panel-2:#16140f;
--zz-ink:#f3eee4; --zz-ink-strong:#fbf7ec;
--zz-ink-dim:rgba(243,238,228,.60); --zz-ink-mute:rgba(243,238,228,.40);
--zz-line:rgba(243,238,228,.12); --zz-line-strong:rgba(243,238,228,.20);
--zz-accent:#A53A2A; --zz-accent-hi:#c14a37;
--zz-sand:#c9bfa8; --zz-sand-hi:#d9d0bb; --zz-bronze:#8a6a3f;
--zz-cta-ink:#fffada;
--zz-r-xs:6px; --zz-r-sm:8px; --zz-r-md:10px; --zz-r-lg:14px; --zz-r-xl:18px; --zz-r-pill:999px;
--zz-s-1:4px; --zz-s-2:8px; --zz-s-3:12px; --zz-s-4:16px; --zz-s-5:24px;
--zz-s-6:32px; --zz-s-7:48px; --zz-s-8:64px; --zz-s-9:96px;
--zz-t-fast:160ms; --zz-t-base:220ms; --zz-t-slow:420ms;
--zz-ease:cubic-bezier(.22,.61,.36,1);
--zz-max:1200px; --zz-gutter:24px;
}
/* --- tokens: creme (light) --- */
:root[data-theme="light"]{
--zz-bg:#fffada; --zz-bg-deep:#fffada; --zz-panel:#ffffff; --zz-panel-2:#f6f0d8;
--zz-ink:#22201f; --zz-ink-strong:#16140f;
--zz-ink-dim:rgba(34,32,31,.62); --zz-ink-mute:rgba(34,32,31,.42);
--zz-line:rgba(34,32,31,.13); --zz-line-strong:rgba(34,32,31,.22);
}
@media (prefers-color-scheme: light){
:root:not([data-theme]){ --zz-bg:#fffada; --zz-panel:#fff; --zz-panel-2:#f6f0d8;
--zz-ink:#22201f; --zz-ink-strong:#16140f;
--zz-ink-dim:rgba(34,32,31,.62); --zz-ink-mute:rgba(34,32,31,.42);
--zz-line:rgba(34,32,31,.13); --zz-line-strong:rgba(34,32,31,.22); }
}
/* --- per-world accent (collection) --- */
[data-world="mars"]{ --zz-accent:#c05a2a; --zz-bg:#150906; }
[data-world="earth"]{ --zz-accent:#c98a5e; }
[data-world="moon"],[data-world="space"]{ --zz-accent:#c9bfa8; }
[data-world="aurum"]{ --zz-accent:#c8a24a; }
[data-world="abrasax"]{ --zz-accent:#7f8f6a; }
[data-world="eden"]{ --zz-accent:#8fae7a; }
/* --- base --- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--zz-bg);color:var(--zz-ink);
font-family:var(--zz-sans);font-weight:300;font-size:16px;line-height:1.6;
letter-spacing:-.005em;-webkit-font-smoothing:antialiased}
::selection{background:rgba(165,58,42,.28)}
a{color:var(--zz-accent);text-decoration:none}
a:hover{color:var(--zz-accent-hi)}
:focus-visible{outline:2px solid var(--zz-accent);outline-offset:2px}
img{max-width:100%;display:block}
/* --- display headlines (cap-accent) --- */
.zz-display{font-family:var(--zz-display);font-weight:200;letter-spacing:-.05em;line-height:1.05;color:var(--zz-ink)}
.zz-display b,.zz-display .cap{font-weight:400}
.zz-h1{font-size:clamp(3rem,8vw,6rem)} /* ~96px */
.zz-h2{font-size:clamp(2.6rem,6vw,4.5rem)}
.zz-h3{font-size:clamp(2rem,4.5vw,3.375rem)}
.zz-h4{font-size:2.5rem} /* 40px floor for display */
/* --- sans headlines (lowercase, no cap-accent) --- */
.zz-sans-h{font-family:var(--zz-sans);font-weight:300;letter-spacing:-.015em;line-height:1.2;text-transform:lowercase}
.zz-caption{font-family:var(--zz-sans);font-weight:400;font-size:.6875rem;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--zz-ink-dim)}
/* --- wordmark (single-colour, weight-accent) --- */
.zz-wordmark{font-family:var(--zz-logo);text-transform:uppercase;font-weight:200;letter-spacing:-.044em;line-height:1;color:var(--zz-ink);margin:0}
.zz-wordmark b{font-weight:700}
.zz-monogram{font-family:var(--zz-logo);font-weight:700;letter-spacing:-.2em;text-transform:uppercase}
/* --- slogan --- */
.zz-slogan{font-family:var(--zz-sans);text-transform:none;font-weight:200;font-size:clamp(2rem,6vw,4.5rem);line-height:1.02;letter-spacing:-.05em;color:var(--zz-ink);margin:2rem 0}
.zz-slogan b{font-weight:700}
/* --- buttons --- */
.zz-btn{font-family:var(--zz-sans);font-weight:600;font-size:.9375rem;line-height:1;
padding:12px 20px;border-radius:var(--zz-r-sm);border:1px solid transparent;cursor:pointer;
transition:background var(--zz-t-fast) var(--zz-ease),border-color var(--zz-t-fast) var(--zz-ease);
min-height:44px;display:inline-flex;align-items:center;gap:8px}
.zz-btn--primary{background:var(--zz-accent);color:var(--zz-cta-ink)}
.zz-btn--primary:hover{background:var(--zz-accent-hi)}
.zz-btn--ghost{background:transparent;color:var(--zz-ink);border-color:var(--zz-line)}
.zz-btn--ghost:hover{border-color:var(--zz-accent);color:var(--zz-accent)}
/* --- card --- */
.zz-card{background:var(--zz-panel);border:1px solid var(--zz-line);border-radius:var(--zz-r-lg);
padding:18px;box-shadow:none;display:flex;flex-direction:column;gap:12px}
.zz-card .actions{border-top:1px solid var(--zz-line);padding-top:12px;margin-top:auto}
.zz-live{display:inline-flex;align-items:center;gap:6px;font:400 .6875rem/1 var(--zz-sans);
letter-spacing:.14em;text-transform:uppercase;color:var(--zz-ink-dim)}
.zz-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--zz-accent)}
/* --- input --- */
.zz-input{font-family:var(--zz-sans);font-size:1rem;color:var(--zz-ink);background:var(--zz-panel-2);
border:1px solid var(--zz-line);border-radius:var(--zz-r-xs);padding:10px 12px}
.zz-input:focus{outline:2px solid var(--zz-accent);outline-offset:1px;border-color:transparent}
/* --- container --- */
.zz-container{max-width:var(--zz-max);margin-inline:auto;padding-inline:var(--zz-gutter)}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
```
---
## Minimal HTML skeleton
```html
Don’t Believe Everything
Reality isn’t given.
It’s chosen.
```