/* ============================================================================
   ZenaHub — Design System stylesheet (the look every design receives)
   Rendered designs receive this file's @import closure, so everything the
   brand needs is reachable from here: fonts, tokens, and the class vocabulary.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Inter:wght@400;500;600&display=swap');
@import url('./tokens/tokens.css');   /* design tokens — CSS custom properties */

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--text-primary);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}

/* ── Typography vocabulary (use these class names) ─────────────────────────── */
.zh-display   { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-display); letter-spacing: var(--tracking-tight); line-height: 1.02; }
.zh-h2        { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: var(--fs-h2); letter-spacing: var(--tracking-snug); }
.zh-h3        { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); }
.zh-lead      { font-size: var(--fs-lead); color: var(--text-secondary); }
.zh-body      { font-size: var(--fs-body); color: var(--text-primary); }
.zh-eyebrow   { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); }
.zh-muted     { color: var(--text-secondary); }

/* ── Buttons ──────────────────────────────────────────────────────────────── */
.zh-btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--fs-sm);
  padding: 11px 20px; border-radius: var(--r-md); border: none; cursor: pointer;
  text-decoration: none; transition: background var(--dur-fast) var(--ease-standard);
}
.zh-btn--primary { background: var(--accent); color: var(--on-accent); }
.zh-btn--primary:hover { background: color-mix(in srgb, var(--accent) 84%, #000); }
.zh-btn--ink { background: var(--ink); color: #fff; }
.zh-btn--ink:hover { background: #000; }
.zh-btn--outline { background: transparent; border: 1.5px solid var(--border); color: var(--ink); }
.zh-btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.zh-btn--pill { border-radius: var(--r-pill); }

/* ── Chips / tags ─────────────────────────────────────────────────────────── */
.zh-chip {
  display: inline-block; font-size: 12px; font-weight: var(--fw-semibold);
  padding: 6px 12px; border-radius: var(--r-pill);
  border: 1px solid var(--border); color: var(--text-tertiary); background: transparent;
}
.zh-chip--selected { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ── Surfaces & cards ─────────────────────────────────────────────────────── */
.zh-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.zh-card__pad { padding: var(--sp-5); }
.zh-eyebrow + .zh-h2 { margin-top: var(--sp-1); }

/* ── Article card (signature component) ───────────────────────────────────── */
.zh-article { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: #fff; max-width: 320px; }
.zh-article__thumb { height: 120px; background: repeating-linear-gradient(135deg,#eef0f3,#eef0f3 9px,#e4e7ec 9px,#e4e7ec 18px); position: relative; }
.zh-article__badge { position: absolute; margin: 10px; font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .08em; color: #fff; background: var(--accent); padding: 3px 8px; border-radius: var(--r-sm); }
.zh-article__body { padding: 12px 14px; }
.zh-article__kicker { font-size: 9px; font-weight: var(--fw-bold); letter-spacing: .07em; color: var(--accent); }
.zh-article__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 15px; line-height: 1.25; margin: 6px 0 0; color: var(--ink); }
.zh-article__src { font-size: 10px; color: #9aa1ad; margin-top: 8px; }
/* AI summary block — the accent-railed highlight that is core to ZenaHub */
.zh-summary { border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: var(--r-xs); padding: 6px 8px; margin-top: 10px; }
.zh-summary__label { display: block; font-size: 9px; letter-spacing: .08em; color: var(--accent); font-weight: var(--fw-bold); }
.zh-summary__text { font-size: 12px; color: var(--text-tertiary); }

/* ── Social · Carousel slide (marketing artwork — one 1:1 slide per frame) ──── */
/* All type scales with the frame via container-query units, so the same classes
   render correctly at preview size and at 1080×1080 export. Rules baked in:
   1:1 frame · generous whitespace · one loud hook · clear size hierarchy ·
   picture and text never overlap (each lives in its own row).                 */
.zh-slide {
  container-type: inline-size;
  position: relative; aspect-ratio: 1 / 1; width: 100%;
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: 7.5cqw; overflow: hidden;
  background: var(--bg); color: var(--ink);
  border-radius: var(--r-lg);           /* preview corners; export flush-square */
}
.zh-slide--ink    { background: var(--ink);   color: #fff; }
.zh-slide--accent { background: var(--accent); color: #fff; }
.zh-slide--paper  { background: #f7f5ef;      color: var(--ink); }   /* warm editorial cream */

/* Fixed top rail — handle + index sit in the same spot on every slide (anchor) */
.zh-slide__rail { display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-body); font-size: 2.9cqw; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; opacity: .78; }

/* Big index number (01, 02 …) — quiet hierarchy marker, always in the accent */
.zh-slide__num { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: 15cqw; line-height: .8; color: var(--accent); }

.zh-slide__eyebrow { font-family: var(--font-body); font-size: 3cqw; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent); }

/* The hook — the single loudest element on a slide; keep it to ≤7 words */
.zh-slide__hook { font-family: var(--font-display); font-weight: var(--fw-extrabold);
  font-size: 13cqw; line-height: .98; letter-spacing: var(--tracking-tight);
  text-transform: uppercase; margin: 0; }
.zh-slide__hook--sentence { text-transform: none; }        /* opt out of all-caps */
.zh-slide__hook--sm { font-size: 9cqw; }                   /* denser / longer hooks */

.zh-accent-word { color: var(--accent); }                  /* red emphasis word in a hook */
.zh-serif { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 500; }
                                                           /* optional italic accent (social artwork only) */

/* Supporting copy — deliberately a step down from the hook, capped width for rhythm */
.zh-slide__body { font-size: 4.2cqw; line-height: 1.45; max-width: 34ch; opacity: .92; margin: 0; }

/* Media zone — its own row; picture and text never share space (no overlap) */
.zh-slide__media { border-radius: var(--r-md); overflow: hidden; background: var(--gray-100);
  aspect-ratio: 16 / 9; width: 100%; }
.zh-slide__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Foot — hairline rule + CTA / swipe cue, pinned to the bottom of the frame */
.zh-slide__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  padding-top: 3.5cqw; font-family: var(--font-body); font-size: 2.9cqw; font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  border-top: 1px solid; border-color: color-mix(in srgb, currentColor 18%, transparent); }

/* Progress dots — position within the set */
.zh-slide__dots { display: flex; gap: 1.6cqw; }
.zh-slide__dots i { width: 2.4cqw; height: 2.4cqw; border-radius: var(--r-pill);
  background: color-mix(in srgb, currentColor 28%, transparent); }
.zh-slide__dots i.is-on { background: var(--accent); }