/* ============ ZABA & ZINGO — canonical stylesheet v1.0.0 ============ */

@import url("fonts/zz-glock.css"); /* H1-Schrift Glock: EINE Quelle, liefert --zz-h1 (ZZR-042) */

/* --- 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;
  /* ZZR-002: Logo-Schrift NUR fuers Logo. Headlines laufen ueber --zz-headline —
     EIN Move hier (bzw. kuenftig Directus) aendert alle Headlines ueberall. */
  --zz-headline:var(--zz-sans);
  /* --zz-h1 (H1 = Glock Grotesk RemoveOverlap2) kommt NUR aus dem @import oben
     (corporate-lab/fonts/zz-glock.css). Regel-Vorschlag ZZR-011 liegt beim Master. */

  --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;
  /* Die Marken-Akzentfarbe traegt als SCHRIFT auf dunklem Grund nur 2,66:1 und
     faellt unter AA. Flaechen und Linien behalten --zz-accent; TEXT nimmt
     --zz-accent-ink (#D9705A = 5,26:1 auf --zz-panel, 5,67:1 auf --zz-bg-deep).
     Gemessen, nicht geschaetzt. Auf hellem Grund traegt der Markenton selbst
     (6,16:1 auf --zz-bg) - dort zeigt das Token auf --zz-accent zurueck. */
  --zz-accent-ink:#D9705A;
  --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-accent-ink:var(--zz-accent);
  --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){
  /* Dieser Zweig MUSS denselben Satz tragen wie :root[data-theme="light"].
     --zz-bg-deep fehlte hier: eine Seite ohne data-theme bekam auf einem hell
     eingestellten Browser dunkle Schrift (--zz-ink) auf dunklem Grund
     (--zz-bg-deep blieb #141311) - gemessen 1,14:1 an Kopfleiste und Fuss. */
  :root:not([data-theme]){ --zz-accent-ink:var(--zz-accent); --zz-bg:#fffada; --zz-bg-deep:#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)}
/* Der Fokusring muss 3:1 gegen den Untergrund tragen (R68). Der Markenton
   selbst schafft auf dunklem Grund nur 2,86:1 - also die AA-Tinte. */
:focus-visible{outline:2px solid var(--zz-accent-ink);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}}