/* ============================================================
   Zero Labs — colors_and_type.css
   Loadable foundation: brand tokens + semantic type styles.
   For raw tokens only, see tokens.css. This file extends those
   with semantic type classes (.zl-h1, .zl-body, .zl-mono, etc.)
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300;400;500;600&family=Funnel+Sans:ital,wght@0,300;0,400;0,500;1,400;1,500&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&display=swap");

:root {
  /* ── neutrals ── */
  --bg: #f7f8fa;
  --bg-2: #eef0f4;
  --ink: #0e1218;
  --ink-mid: #586273;
  --ink-low: #a4adbc;
  --rule: #d6dbe4;

  /* ── primary accent ── */
  --accent: #2236d1;
  --accent-2: #06b6d4;
  --accent-3: #5b66f3;
  --accent-soft: rgba(34, 54, 209, 0.08);

  /* ── iridescent gradient (signature) ── */
  --grad-cool: linear-gradient(120deg, #5b66f3 0%, #2236d1 35%, #06b6d4 70%, #14b8a6 100%);

  /* ── semantic state colors ── */
  --state-private: #2236d1;
  --state-public: #b07000;
  --state-danger: #c53a3a;

  /* ── typography families ── */
  --font-display: "Funnel Display", system-ui, sans-serif;
  --font-body: "Funnel Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── shadows ── */
  --shadow-sm: 0 1px 2px rgba(20, 30, 60, 0.04);
  --shadow-card:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 24px 60px -28px rgba(34, 54, 209, 0.18),
    0 1px 2px rgba(20, 30, 60, 0.04);

  /* ── spacing scale (8px-based, plus a few in-between) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;

  /* ── radii ── */
  --radius-1: 4px;
  --radius-2: 8px;
  --radius-3: 12px;
  --radius-4: 16px;
  --radius-pill: 999px;

  /* ── content widths ── */
  --width-text: 64ch;
  --width-prose: 720px;
  --width-frame: 1200px;
}

:root[data-theme="dark"],
.theme-dark {
  --bg: #0b0e18;
  --bg-2: #1b2138;
  --ink: #dce2ec;
  --ink-mid: #7b8499;
  --ink-low: #4a5366;
  --rule: #232940;
  --accent: #6b7cf0;
  --accent-soft: rgba(107, 124, 240, 0.12);
  --state-private: #6b7cf0;
  --state-public: #e0b060;
  --state-danger: #e68080;
}

/* ============================================================
   Type classes — semantic, not utility.
   Pair a class with its tag, e.g. <h1 class="zl-h1">.
   ============================================================ */

.zl-display,
.zl-h1 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 132px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  /* Italic glyphs lean right; reserve a hair of room so descenders/serifs
     don't clip when the headline hits the container edge. */
  padding-right: 0.06em;
  overflow: visible;
}
.zl-h1 em, .zl-display em {
  /* italic + tight tracking can clip the trailing glyph; ease tracking on em */
  letter-spacing: -0.005em;
  padding-right: 0.04em;
}

.zl-h2 {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(34px, 5vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  padding-right: 0.06em;
  overflow: visible;
}
.zl-h2 em { letter-spacing: -0.005em; padding-right: 0.04em; }

.zl-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.zl-h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}

.zl-eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0;
}

.zl-body {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
}

.zl-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mid);
}

.zl-caption {
  font-family: var(--font-body);
  font-weight: 400;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-mid);
}

.zl-mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}

.zl-mono-stamp {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--ink-mid);
  text-transform: uppercase;
}

/* Italic display emphasis carries the iridescent shimmer.
   Apply via <em> inside h1–h4 or .em-shimmer directly. */
.zl-h1 em,
.zl-h2 em,
.zl-h3 em,
.zl-h4 em,
.zl-display em,
.em-shimmer {
  font-style: italic;
  font-weight: inherit;
  background: var(--grad-cool);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: zl-shimmer 14s linear infinite;
}

@keyframes zl-shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .zl-h1 em, .zl-h2 em, .zl-h3 em, .zl-h4 em,
  .zl-display em, .em-shimmer {
    animation: none;
  }
}

/* Body italics stay default ink — no shimmer. */
p em, li em, .zl-body em, .zl-body-sm em {
  font-style: italic;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
  animation: none;
}

/* ============================================================
   Atmospheric mesh background — apply to a fixed layer behind
   page content. Honors prefers-reduced-motion.
   ============================================================ */
.zl-atmos {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  background: var(--bg);
}
.zl-atmos::before,
.zl-atmos::after {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(40% 36% at 18% 22%, rgba(91, 102, 243, 0.45) 0%, transparent 60%),
    radial-gradient(38% 36% at 82% 28%, rgba(6, 182, 212, 0.35) 0%, transparent 60%),
    radial-gradient(46% 42% at 30% 84%, rgba(34, 54, 209, 0.40) 0%, transparent 60%),
    radial-gradient(42% 38% at 78% 78%, rgba(20, 184, 166, 0.30) 0%, transparent 60%);
  filter: blur(60px);
  opacity: 0.55;
  animation: zl-atmos-drift 28s ease-in-out infinite;
}
.zl-atmos::after {
  animation-direction: reverse;
  animation-duration: 36s;
  opacity: 0.40;
  mix-blend-mode: screen;
}
@keyframes zl-atmos-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-3%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .zl-atmos::before, .zl-atmos::after { animation: none; }
}

/* ============================================================
   Frosted glass card — pillar surface.
   ============================================================ */
.zl-glass {
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(18px) saturate(1.1);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius-4);
  box-shadow: var(--shadow-card);
  position: relative;
  overflow: hidden;
}
.zl-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(91, 102, 243, 0.05) 0%, rgba(6, 182, 212, 0.03) 50%, rgba(20, 184, 166, 0.05) 100%);
  pointer-events: none;
  border-radius: inherit;
}