/* ============================================================================
   sawwave-tokens.css — the SAFE, app-facing slice of the sawwave.works system.

   Hosted apps (buzz, wedding, news, …) link THIS, not sawwave.css:
     <link rel="stylesheet" href="https://sawwave.works/sawwave-tokens.css">

   Everything here is `--sw-*` NAMESPACED or `.sw-*` class-scoped, so it can never
   collide with an app's own `--bg`/`--fg`/`--border` etc. (news, for instance,
   defines those for its own theming). Apps opt into sawwave accents by using the
   `--sw-*` vars; the shared "sawwave bar" below uses only `--sw-*`, so it renders
   in the sawwave palette no matter what theme the host app is in. See STYLE_GUIDE.md.

   The full homepage stylesheet (global body/a/header/… rules) lives in sawwave.css
   and is the homepage's alone.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');

:root {
  --sw-bg: #000000;
  --sw-bg-elevated: #020602;
  --sw-fg: #00ff41;
  --sw-fg-soft: #00cc33;
  --sw-muted: #007a1f;
  --sw-border: #003d10;
  --sw-err: #ff6b6b;
  --sw-glow: 0 0 4px rgba(0, 255, 65, 0.45);
  --sw-glow-strong: 0 0 6px rgba(0, 255, 65, 0.6), 0 0 12px rgba(0, 255, 65, 0.3);
  --sw-font: "VT323", "Courier New", "Consolas", monospace;
}

/* Slim "part of sawwave.works" bar an app shows when viewed standalone (its own
   subdomain). Hidden by the app when it's framed inside the shell (self!==top). */
.sw-embed-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.4rem clamp(0.8rem, 4vw, 1.4rem);
  font-family: var(--sw-font); background: var(--sw-bg-elevated);
  border-bottom: 1px solid var(--sw-border);
  color: var(--sw-fg-soft); font-size: 1rem; letter-spacing: 0.02em;
  text-shadow: var(--sw-glow);
}
.sw-embed-bar a { color: var(--sw-fg); text-decoration: none; }
.sw-embed-bar a:hover { text-shadow: var(--sw-glow-strong); }
.sw-embed-bar .sw-embed-mark { color: var(--sw-fg); text-shadow: var(--sw-glow); }
.sw-embed-bar .sw-embed-mark .caret { animation: sw-blink 1s steps(2) infinite; }
.sw-embed-bar .sw-embed-app { color: var(--sw-fg-soft); }
@keyframes sw-blink { 50% { opacity: 0; } }
.sw-embed-bar[hidden] { display: none; }