/* Shared dark dev-tools palette + typographic system */
:root {
  --bg-0: #06080d;
  --bg-1: #0b0f17;
  --bg-2: #111824;
  --bg-3: #182231;
  --line: #1f2a3c;
  --line-2: #2a3851;
  --fg-0: #e6edf7;
  --fg-1: #b6c2d4;
  --fg-2: #6b7a93;
  --fg-3: #45526a;

  --accent: #7CFFCB;        /* mint */
  --accent-2: #69B7FF;      /* azure */
  --accent-3: #FFB86B;      /* amber */
  --accent-4: #C792EA;      /* violet */
  --warn: #ff6b8a;
  --ok: #7CFFCB;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Roboto Mono", ui-monospace, monospace;
  --font-display: "Inter", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body, #root { margin: 0; padding: 0; height: 100%; background: var(--bg-0); color: var(--fg-0); font-family: var(--font-sans); }
body { overflow: hidden; }
::selection { background: color-mix(in oklab, var(--accent) 35%, transparent); color: var(--fg-0); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 6px; }
::-webkit-scrollbar-track { background: transparent; }

button { font: inherit; cursor: pointer; color: inherit; background: transparent; border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; transition: all 120ms ease; }
button:hover { border-color: var(--accent); color: var(--accent); }
a { color: var(--accent-2); text-decoration: none; }
a:hover { color: var(--accent); }

.mono { font-family: var(--font-mono); font-feature-settings: "ss01", "cv02"; }
.dim { color: var(--fg-2); }
.dimmer { color: var(--fg-3); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border: 1px solid var(--line); border-radius: 999px; font-family: var(--font-mono); font-size: 11px; color: var(--fg-1); background: var(--bg-1); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

.hud-grid { background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 40px 40px;
  background-position: -1px -1px;
}

/* tweak-style accents */
.accent { color: var(--accent); }
.accent-bg { background: var(--accent); color: var(--bg-0); }

/* Generic reveal */
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.fadeUp { animation: fadeUp 480ms ease both; }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.9); } }
.pulse { animation: pulseDot 1.6s ease-in-out infinite; }

/* No focus rings inside iframe demos — keep tactile but minimal */
:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }