# ZABA & ZINGO — Tailwind

Two drop-ins: **Tailwind v4** (`@theme`, preferred) and **Tailwind v3** (`tailwind.config.js`).
Both expose the same token names so classes read the same across projects.

---

## Tailwind v4 — `app.css`

```css
@import "tailwindcss";

@theme {
  /* fonts */
  --font-display: "Noto Serif Display ExtraCondensed", serif;
  --font-logo:    "Zaba Logo", "Noto Serif Display ExtraCondensed", serif;
  --font-sans:    "PP Neue Montreal", system-ui, sans-serif;

  /* colour — dark defaults (see :root[data-theme=light] below to flip) */
  --color-zz-bg:        #22201f;
  --color-zz-bg-deep:   #141311;
  --color-zz-panel:     #1c1b18;
  --color-zz-panel-2:   #16140f;
  --color-zz-ink:       #f3eee4;
  --color-zz-ink-strong:#fbf7ec;
  --color-zz-accent:    #A53A2A;
  --color-zz-accent-hi: #c14a37;
  --color-zz-sand:      #c9bfa8;
  --color-zz-bronze:    #8a6a3f;
  --color-zz-cta-ink:   #fffada;

  /* radius */
  --radius-zz-xs: 6px;  --radius-zz-sm: 8px;  --radius-zz-md: 10px;
  --radius-zz-lg: 14px; --radius-zz-xl: 18px;

  /* spacing (extends the default 4px scale with named steps) */
  --spacing-zz-5: 24px; --spacing-zz-6: 32px; --spacing-zz-7: 48px;
  --spacing-zz-8: 64px; --spacing-zz-9: 96px;

  /* motion */
  --ease-zz: cubic-bezier(.22,.61,.36,1);
}

/* creme theme — flip the same tokens */
:root[data-theme="light"]{
  --color-zz-bg:#fffada; --color-zz-panel:#ffffff; --color-zz-panel-2:#f6f0d8;
  --color-zz-ink:#22201f; --color-zz-ink-strong:#16140f;
}
```

Usage: `bg-zz-bg text-zz-ink`, `bg-zz-accent text-zz-cta-ink`, `rounded-zz-lg`,
`font-display`, `border-zz-line/10`.

---

## Tailwind v3 — `tailwind.config.js`

```js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{html,js,ts,jsx,tsx}"],
  darkMode: ["selector", '[data-theme="dark"]'],
  theme: {
    extend: {
      fontFamily: {
        display: ['"Noto Serif Display ExtraCondensed"', "serif"],
        logo:    ['"Zaba Logo"', '"Noto Serif Display ExtraCondensed"', "serif"],
        sans:    ['"PP Neue Montreal"', "system-ui", "sans-serif"],
      },
      colors: {
        zz: {
          bg: "#22201f", "bg-deep": "#141311", panel: "#1c1b18", "panel-2": "#16140f",
          ink: "#f3eee4", "ink-strong": "#fbf7ec",
          "ink-dim": "rgba(243,238,228,.60)", "ink-mute": "rgba(243,238,228,.40)",
          line: "rgba(243,238,228,.12)",
          accent: "#A53A2A", "accent-hi": "#c14a37",
          sand: "#c9bfa8", "sand-hi": "#d9d0bb", bronze: "#8a6a3f",
          "cta-ink": "#fffada",
        },
      },
      borderRadius: { "zz-xs": "6px", "zz-sm": "8px", "zz-md": "10px", "zz-lg": "14px", "zz-xl": "18px" },
      spacing: { "zz-5": "24px", "zz-6": "32px", "zz-7": "48px", "zz-8": "64px", "zz-9": "96px" },
      letterSpacing: { "zz-display": "-0.05em", "zz-tight": "-0.015em", "zz-caps": "0.14em", "zz-mono": "-0.2em" },
      lineHeight: { "zz-display": "1.05", "zz-head": "1.2", "zz-body": "1.6" },
      transitionTimingFunction: { zz: "cubic-bezier(.22,.61,.36,1)" },
      maxWidth: { "zz-container": "1200px" },
      boxShadow: { zz: "none" }, // the house is flat — never a drop shadow
    },
  },
  plugins: [],
};
```

### Component classes (`@layer components`)

```css
@layer components {
  .zz-wordmark { @apply font-logo uppercase font-[200] tracking-[-0.044em] leading-none text-zz-ink; }
  .zz-wordmark b { @apply font-bold; }
  .zz-display  { @apply font-display font-[200] tracking-zz-display leading-zz-display text-zz-ink; }
  .zz-display b, .zz-display .cap { @apply font-normal; }
  .zz-btn-primary { @apply font-sans font-semibold rounded-zz-sm bg-zz-accent text-zz-cta-ink px-5 py-3 min-h-[44px] hover:bg-zz-accent-hi transition; }
  .zz-btn-ghost   { @apply font-sans font-semibold rounded-zz-sm border border-zz-line text-zz-ink px-5 py-3 min-h-[44px] hover:border-zz-accent hover:text-zz-accent transition; }
  .zz-card        { @apply bg-zz-panel border border-zz-line rounded-zz-lg p-[18px] shadow-none flex flex-col gap-3; }
  .zz-caption     { @apply font-sans font-normal text-[11px] tracking-zz-caps uppercase text-zz-ink-dim; }
}
```

**Reminder:** display serif is headline/wordmark only; body is `font-sans`. No cut-corner
utilities, no `shadow-*` (house is flat), no emoji, no native controls.