/* shared design tokens: every demo links this first, then overrides
   the custom properties for its own skin */

:root {
  /* surfaces and ink */
  --ll-bg: #0f1117;
  --ll-surface: #171a22;
  --ll-surface-2: #1f232e;
  --ll-border: rgba(255, 255, 255, 0.1);
  --ll-text: #eceeff;
  --ll-muted: #9aa3b8;

  /* accents */
  --ll-accent: #7a81ff;
  --ll-accent-ink: #0f1117;
  --ll-positive: #5cffaa;
  --ll-warn: #ffcc66;
  --ll-danger: #ff6b81;

  /* radius scale */
  --ll-radius-sm: 6px;
  --ll-radius-md: 10px;
  --ll-radius-lg: 16px;
  --ll-radius-pill: 999px;

  /* spacing scale */
  --ll-space-1: 4px;
  --ll-space-2: 8px;
  --ll-space-3: 12px;
  --ll-space-4: 16px;
  --ll-space-5: 24px;
  --ll-space-6: 32px;

  /* type */
  --ll-font-sans: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  --ll-font-mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;
  --ll-font-serif: "Georgia", "Times New Roman", serif;
  --ll-fs-xs: 11px;
  --ll-fs-sm: 13px;
  --ll-fs-md: 15px;
  --ll-fs-lg: 20px;
  --ll-fs-xl: 32px;

  --ll-shadow: 0 18px 40px rgba(0, 0, 0, 0.38);

  /* exit chip accent, constant across skins */
  --ll-exit-accent: 122, 129, 255;
}

#demo-exit {
  position: fixed;
  top: 12px;
  right: 14px;
  z-index: 900;
  padding: 6px 11px;
  border-radius: var(--ll-radius-pill);
  border: 1px solid rgba(var(--ll-exit-accent), 0.58);
  background: rgba(var(--ll-exit-accent), 0.24);
  color: #eceeff;
  text-decoration: none;
  font-size: 10px;
  font-family: var(--ll-font-sans);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transition: color 140ms ease, border-color 140ms ease, background-color 140ms ease;
  backdrop-filter: blur(2px);
}

#demo-exit:hover,
#demo-exit:focus-visible {
  background: rgba(var(--ll-exit-accent), 0.36);
  border-color: rgba(var(--ll-exit-accent), 0.78);
  color: #f7f8ff;
  outline: none;
}