/* =====================================================================
   ref-base.css — base/component styles + token bridge for the imported
   sandbox pages. Maps the reference site's design tokens onto the
   promptpunks system so the pages match our site guide.
   ===================================================================== */

/* ---------- token bridge (reference tokens -> our system) ---------- */
:root {
  --font-serif: 'Space Grotesk', sans-serif;   /* headings -> our display font */
  --font-sans:  'Space Grotesk', sans-serif;   /* body */
  --font-mono:  'Space Mono', monospace;       /* labels */
  --ink-dim:    var(--subtext);
  --surface:    var(--bg);     /* pure white */
  --surface-2:  var(--bg);     /* pure white */
  --accent-ink: #ffffff;
  --accent-2:   var(--accent);   /* tier accent variant -> electric blue */
  --accent-3:   var(--ink);      /* tier accent variant -> ink */
  --gutter:     32px;
  --nav-h:      64px;   /* sticky nav height */
  --container:  1280px;
  --ease:       cubic-bezier(.2, .8, .2, 1);
  --radius:     0;                              /* sharp corners, brutalist */
  --radius-sm:  0;
}
html[data-theme="dark"] {
  --surface-2: #1c1c1c;
}

/* =====================================================================
   ref-base.css — base/component styles for the imported sandbox pages
   (gallery · video · interactive · llm). The originals linked a shared
   css/style.css that wasn't included; these are reconstructed in the
   promptpunks design system (tokens, Space Grotesk / Space Mono).
   ===================================================================== */

/* ---------- hero ---------- */
.hero { padding: 100px 0 56px; }
.hero-title, .h-hero {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  letter-spacing: -0.02em; line-height: 0.9; text-transform: none;
  font-size: clamp(52px, 9vw, 140px);
}
.hero-sub, .lead {
  color: var(--subtext); line-height: 1.6;
  font-size: clamp(17px, 1.5vw, 21px); max-width: 62ch; margin-top: 24px;
}
.hero-meta {
  display: flex; flex-wrap: wrap; gap: 40px;
  margin: 36px 0 4px; padding-top: 24px; border-top: var(--border);
}
.hero-meta > div {
  display: flex; flex-direction: column; gap: 6px;
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--subtext-2);
}
.hero-meta > div b {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700;
  font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--ink);
}

/* ---------- generic section + ref label ---------- */
.section { padding: 80px 0; position: relative; }
.section-ref {
  font-family: 'Space Mono', monospace; font-size: 11px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  margin-bottom: 20px;
  /* match the self-centering inset that the page sections use, so labels
     line up with content. Reset when the label sits inside a .container. */
  padding-left:  max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-right: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  padding-top: clamp(40px, 6vw, 72px);
}
.container .section-ref,
.hero .section-ref,
.pkg-section .section-ref {
  padding-left: 0; padding-right: 0; padding-top: 0;
}

/* ---------- llms.txt code preview syntax ---------- */
.llms-comment { color: var(--subtext-2); }
.llms-key { color: var(--accent); font-weight: 700; }
.llms-url { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- status / signal modifiers ---------- */
.pass, .green { color: #16a34a; }
.warn, .orange, .med, .yellow { color: var(--accent); }
.high, .red { color: #dc2626; }
.signal-pill.high, .signal-pill.med, .signal-pill.low { border-color: currentColor; }

/* ---------- copy toast ---------- */
.copy-toast {
  position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: var(--bg);
  font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: 0.08em;
  padding: 12px 18px; opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity .25s ease, transform .25s ease;
}
.copy-toast.show, .copy-toast.is-active, .copy-toast.visible {
  opacity: 1; transform: translateX(-50%) translateY(0);
}