/*
 * Shared zladson.com styling for the /compound pages.
 *
 * The sheets under /compound/ are imported design-tool exports, not React
 * routes, so they cannot use the site's Tailwind build. This file restates
 * the handful of tokens that actually make a page read as zladson.com:
 * the animated four-layer gradient ground, Roboto, cyan/orange accents and
 * the white/5 glass card treatment.
 *
 * index.html and model-*.html <link> this file. The design packages cannot
 * — the bundler rebuilds <head> at runtime and discards static links — so
 * their copy of these rules lives inline in the bundled template's own
 * <style> block. Keep the two in sync. See docs/COMPOUND_DEPLOY.md.
 */

:root {
  --ink: #ffffff;
  --body: #d1d5db;
  --muted: #9ca3af;
  --dim: #6b7280;
  --cyan: #00f5ff;
  --cyan-2: #22d3ee;
  --orange: #ff6b35;
  --orange-2: #fb923c;
  --indigo: #a5b4fc;
  --surface: rgba(255, 255, 255, 0.05);
  --surface-2: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.12);
  --line-2: rgba(255, 255, 255, 0.22);
  --ground: #0d1220;
}

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

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  line-height: 1.6;
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background:
    linear-gradient(135deg, #0a0a0a, #1a1a2e, #16213e, #0f3460),
    radial-gradient(circle at 20% 80%, rgba(0, 245, 255, .05) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 107, 53, .05) 0%, transparent 50%),
    radial-gradient(circle at 40% 40%, rgba(138, 43, 226, .05) 0%, transparent 50%);
  background-size: 400% 400%, 100% 100%, 100% 100%, 100% 100%;
  background-attachment: fixed;
  animation: compoundGradientShift 20s ease infinite;
}

a { color: var(--cyan); text-decoration: none; transition: color .3s ease; }
a:hover { color: var(--orange); }
::selection { background: rgba(0, 245, 255, .3); color: #fff; }
:where(a, button):focus-visible { outline: 2px solid var(--cyan-2); outline-offset: 2px; border-radius: 4px; }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* Matches the site's eyebrow label: uppercase, tracked, indigo. */
.eyebrow {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--indigo);
  margin: 0;
}

/* Site nav bar: black/85 with a blurred backdrop and a white/10 hairline. */
.site-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(0, 0, 0, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}

/* The ZL brand tile from the site nav. */
.brand-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--cyan-2), var(--orange-2));
  color: #000;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .02em;
  flex: 0 0 auto;
}

.gradient-text {
  background: linear-gradient(to right, var(--cyan-2), var(--orange-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cyan);
}

/* Site pill button — the nav's hover pill and the hero CTA share this shape. */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: #e5e7eb;
  font: 500 13px/1 'Roboto', sans-serif;
  padding: 9px 14px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
  text-decoration: none;
  white-space: nowrap;
}
.pill:hover { background: var(--surface-2); border-color: rgba(34, 211, 238, .5); color: #fff; }
.pill[aria-pressed="true"],
.pill[aria-current="page"],
.pill.is-active {
  background: linear-gradient(135deg, var(--cyan-2), var(--orange-2));
  border-color: transparent;
  color: #06121f;
  font-weight: 700;
}
.pill.is-primary {
  background: linear-gradient(135deg, var(--cyan-2), var(--orange-2));
  border-color: transparent;
  color: #06121f;
  font-weight: 700;
}
.pill.is-primary:hover { filter: brightness(1.08); color: #06121f; }

/* Site card: white/5 → white/10 glass, white/10 hairline, 1rem radius. */
.card {
  background: linear-gradient(to bottom right, rgba(255, 255, 255, .05), rgba(255, 255, 255, .1));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid var(--line);
  border-radius: 16px;
}
