/* basedagent.com — shared base styles
   Tokens live as CSS vars so directions / tweaks can override globally. */

:root {
  /* base color tokens (overridden per-direction) */
  --base-blue: #0052ff;
  --base-blue-2: #2870ff;
  --base-blue-soft: rgba(0, 82, 255, 0.14);
  --pos: #29c984;
  --neg: #ff4d6d;

  /* density (overridden by tweaks) */
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 24px;
  --gap-4: 40px;
  --gap-5: 64px;
  --gap-6: 96px;
}

.compact {
  --gap-1: 6px;
  --gap-2: 12px;
  --gap-3: 18px;
  --gap-4: 28px;
  --gap-5: 44px;
  --gap-6: 64px;
}
.comfy {
  --gap-1: 10px;
  --gap-2: 20px;
  --gap-3: 32px;
  --gap-4: 56px;
  --gap-5: 88px;
  --gap-6: 128px;
}

/* keep canvas itself out of the way; everything's dark inside artboards */
body { background: #f0eee9; }

/* ---------- Direction A: Aperture (clean institutional) ---------- */
.dir-aperture {
  --bg-0: #08090b;
  --bg-1: #0e1014;
  --bg-2: #15181d;
  --bg-3: #1d2128;
  --line: rgba(255, 255, 255, 0.07);
  --line-2: rgba(255, 255, 255, 0.12);
  --text: #f5f6f8;
  --text-2: #c2c6cf;
  --muted: #7a808c;
  --muted-2: #4f5460;
  --nav-bg: rgba(8, 9, 11, 0.72);
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body, "Geist", ui-sans-serif, system-ui, sans-serif);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.dir-aperture .mono { font-family: var(--font-mono, "Geist Mono", ui-monospace, monospace); }

/* ---------- Direction A · Light — Base brand (RGB 0 0 255, mono + Doto) ----
   Per base.org/brand: lead with monochrome, spotlight one accent (Base Blue).
   Avoid gradients in core comms; Doto used in ALL CAPS only.                  */
.dir-aperture-light {
  --base-blue:     #0000ff;   /* Base Blue — RGB 0 0 255 */
  --base-blue-2:   #0000ff;
  --base-blue-soft: rgba(0, 0, 255, 0.08);
  --pos: #1b5e20;
  --neg: #b3261e;

  --bg-0: #ffffff;
  --bg-1: #fafafa;
  --bg-2: #f4f4f5;
  --bg-3: #e7e7ea;
  --line:   rgba(0, 0, 0, 0.07);
  --line-2: rgba(0, 0, 0, 0.14);
  --text:   #0a0a0a;
  --text-2: #3a3a3a;
  --muted:  #71717a;
  --muted-2: #a1a1aa;
  --nav-bg: rgba(255, 255, 255, 0.78);

  background: var(--bg-0);
  color: var(--text);
  font-family: "Funnel Sans", "Helvetica Neue", ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
.dir-aperture-light .mono {
  font-family: "Doto", ui-monospace, "JetBrains Mono", monospace;
  font-weight: 500;
  letter-spacing: 0.06em;   /* Doto needs spacing */
  text-transform: uppercase; /* Per Base guide: Doto = all caps only */
}
.dir-aperture-light h1, .dir-aperture-light h2, .dir-aperture-light h3 {
  font-family: "Funnel Display", "Funnel Sans", ui-sans-serif, sans-serif;
  font-weight: 500;
}
/* Doto inline runs that aren't full uppercase identifiers — like the address,
   block num — should not force uppercase via the .mono rule. Override with .mono-id */
.dir-aperture-light .mono-id {
  font-family: "Doto", ui-monospace, monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
}
/* keep sparkline strokes from looking too thin on white */
.dir-aperture-light .spark path { stroke-width: 1.6; }

/* Base brand rule — no gradients in core comms. Nuke hero glow on light. */
.dir-aperture-light .bg-glow::before {
  background:
    radial-gradient(circle at 1px 1px, rgba(0,0,0,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 30%, #000 20%, transparent 70%);
}
.dir-aperture-light .live-dot {
  background: var(--base-blue);
  box-shadow: 0 0 8px rgba(0, 0, 255, 0.4);
}
/* slightly heavier text in body to compensate for thin Funnel Sans on white */
.dir-aperture-light { font-weight: 400; }
.dir-aperture-light .pos { color: var(--pos); }
.dir-aperture-light .neg { color: var(--neg); }

/* ---------- Direction B: Terminal (data-dense) ---------- */
.dir-terminal {
  --bg-0: #000000;
  --bg-1: #07090c;
  --bg-2: #0c1014;
  --bg-3: #131a22;
  --line: rgba(0, 119, 255, 0.18);
  --line-2: rgba(0, 119, 255, 0.32);
  --text: #d6e4ff;
  --text-2: #8aa3cf;
  --muted: #4b6088;
  --muted-2: #2a3a55;
  --term-green: #19f59c;
  background: var(--bg-0);
  color: var(--text);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-feature-settings: "ss02", "cv02";
  -webkit-font-smoothing: antialiased;
}

/* ---------- Direction C: Editorial (magazine, dark navy) ---------- */
.dir-editorial {
  --bg-0: #060a18;
  --bg-1: #0b1124;
  --bg-2: #131a33;
  --bg-3: #1c2447;
  --line: rgba(180, 200, 255, 0.12);
  --line-2: rgba(180, 200, 255, 0.22);
  --text: #f3eee2;        /* warm cream */
  --text-2: #c9c2b1;
  --muted: #8a8473;
  --serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  background: var(--bg-0);
  color: var(--text);
  font-family: var(--font-body, "Geist", ui-sans-serif, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}
.dir-editorial .serif { font-family: var(--serif); font-weight: 400; }

/* ---------- shared utilities ---------- */
.hairline { border: 1px solid var(--line); }
.hairline-b { border-bottom: 1px solid var(--line); }
.hairline-t { border-top: 1px solid var(--line); }
.tabular { font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.muted { color: var(--muted); }
.text-2 { color: var(--text-2); }

/* background treatments — body class toggles which is visible */
.bg-grid::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse at top, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at top, #000 30%, transparent 80%);
  pointer-events: none;
}
.bg-noise::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1200px 600px at 50% -10%, var(--base-blue-soft), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.6 0 0 0 0 0.7 0 0 0 0 1 0 0 0 0.08 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  pointer-events: none;
}
.bg-glow::before {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1000px 500px at 20% 0%, rgba(0,82,255,0.20), transparent 60%),
    radial-gradient(800px 400px at 90% 30%, rgba(0,82,255,0.10), transparent 60%);
  pointer-events: none;
}

/* dot for live indicator */
.live-dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pos); box-shadow: 0 0 8px var(--pos);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .55; transform: scale(.78); }
}

/* sparkline path animates in once visible */
.spark path { stroke-dasharray: 200; stroke-dashoffset: 0; }

/* ambient pixel pulse used by <PixelDrift> + RobotAgentArt scatter */
@keyframes pixelPulse {
  0%   { opacity: 0.25; transform: scale(0.6); }
  50%  { opacity: 1;    transform: scale(1);   }
  100% { opacity: 0.4;  transform: scale(0.8); }
}

/* no scrollbars in artboards */
.artboard-root, .artboard-root * { scrollbar-width: none; }
.artboard-root *::-webkit-scrollbar { display: none; }

/* ascii art block */
.ascii { white-space: pre; line-height: 1; font-family: "JetBrains Mono", monospace; }

/* mobile nav */
@media (max-width: 768px) {
  .nav-desktop { display: none !important; }
  .nav-burger { display: flex !important; }
  .nav-mobile-menu { display: flex !important; }
}