/* ============================================================
   PostZenly Design Tokens — SINGLE SOURCE OF TRUTH
   Every page on postzenly.com uses these. No exceptions.
   Brand: clean + premium. Violet → Pink gradient. Plus Jakarta Sans.
   ============================================================ */
:root {
  /* ——— Brand ——— */
  --pz-violet: #7c3aed;
  --pz-violet-deep: #6d28d9;
  --pz-violet-dark: #4c1d95;
  --pz-pink: #ec4899;
  --pz-pink-deep: #db2777;
  --pz-cyan: #06b6d4;
  --pz-grad: linear-gradient(135deg, #7c3aed, #ec4899);
  --pz-grad-soft: linear-gradient(135deg, rgba(124,58,237,.08), rgba(236,72,153,.06));

  /* ——— Surfaces (light) ——— */
  --pz-bg: #faf9fd;
  --pz-surface: #ffffff;
  --pz-surface-2: #f5f3ff;
  --pz-border: #ece9f4;
  --pz-border-soft: #f3f0fa;

  /* ——— Text (light) ——— */
  --pz-ink: #1e1b36;
  --pz-ink-2: #55517a;
  --pz-ink-3: #9a97b8;

  /* ——— Typography ——— */
  --pz-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ——— Radius ——— */
  --pz-r-sm: 10px;
  --pz-r-md: 16px;
  --pz-r-lg: 22px;
  --pz-r-xl: 28px;
  --pz-r-pill: 999px;

  /* ——— Shadows ——— */
  --pz-shadow-sm: 0 2px 8px rgba(26,22,38,.06);
  --pz-shadow-md: 0 12px 32px -12px rgba(124,58,237,.18);
  --pz-shadow-lg: 0 24px 64px -24px rgba(124,58,237,.22);
  --pz-shadow-btn: 0 8px 24px rgba(124,58,237,.32);
}

/* ——— Shared primitives: buttons ——— */
.pz-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--pz-font); font-weight: 700; font-size: 15px;
  padding: 13px 28px; border-radius: var(--pz-r-md); border: none; cursor: pointer;
  text-decoration: none; transition: transform .18s, box-shadow .18s;
}
.pz-btn-primary {
  background: var(--pz-grad); color: #fff;
  box-shadow: var(--pz-shadow-btn);
}
.pz-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(124,58,237,.42); }
.pz-btn-secondary {
  background: var(--pz-surface); color: var(--pz-ink);
  border: 1.5px solid var(--pz-border);
}
.pz-btn-secondary:hover { border-color: var(--pz-violet); color: var(--pz-violet); transform: translateY(-2px); }

/* ——— Shared primitives: cards ——— */
.pz-card {
  background: var(--pz-surface);
  border: 1px solid var(--pz-border);
  border-radius: var(--pz-r-lg);
  box-shadow: var(--pz-shadow-md);
}

/* ——— Shared primitives: section headings ——— */
.pz-h-grad {
  background: linear-gradient(120deg, var(--pz-violet-dark), var(--pz-violet) 45%, var(--pz-pink-deep));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}