/* Future Labs Summit — base styles
   Themes are driven by CSS variables set on :root by app.jsx based on Tweaks. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  background-image: var(--atmos, none);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

:root {
  /* Default Aurora palette — overridden by JS */
  --bg: #0A0820;
  --ink: #F4F1FF;
  --paper: #15112E;
  --signal: #DDD3FF;
  --signal-fg: #0A0820;
  --rule: rgba(244, 241, 255, 0.18);
  --muted: rgba(244, 241, 255, 0.62);
  --soft: rgba(244, 241, 255, 0.05);
  --foot-bg: #040210;
  --foot-fg: #F4F1FF;
  --atmos: radial-gradient(ellipse 80% 60% at 20% 0%, rgba(221,211,255,0.10), transparent 60%),
           radial-gradient(ellipse 70% 50% at 90% 100%, rgba(244,241,255,0.04), transparent 60%);

  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-sans: "Bricolage Grotesque", system-ui, sans-serif;
  --font-mono: "Geist Mono", ui-monospace, monospace;
  --font-serif: "Newsreader", Georgia, serif;

  --gutter: 32px;
  --pad-section: 120px;
  --pad-block: 48px;
  --max: 1640px;
}

[data-density="airy"] {
  --pad-section: 180px;
  --pad-block: 72px;
}
[data-density="dense"] {
  --pad-section: 72px;
  --pad-block: 28px;
}

/* shared utility classes */
.fl-mono { font-family: var(--font-mono); font-weight: 400; letter-spacing: 0.02em; }
.fl-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; line-height: 0.9; }
.fl-serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }

.fl-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.fl-shell { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.fl-rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }

.fl-btn {
  display: inline-flex; align-items: center; gap: 10px;
  height: 52px; padding: 0 22px;
  border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  border-radius: 999px; transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.fl-btn:hover { transform: translateY(-1px); background: var(--signal); border-color: var(--signal); color: var(--signal-fg); }
.fl-btn.ghost { background: transparent; color: var(--ink); }
.fl-btn.ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.fl-btn.signal { background: var(--signal); border-color: var(--signal); color: var(--signal-fg); }
.fl-btn.signal:hover { background: var(--ink); border-color: var(--ink); color: var(--bg); }
[data-dark="1"] .fl-btn.signal { box-shadow: 0 0 24px rgba(244,241,255,0.18); }

.fl-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); display: inline-block; }
.fl-blink { animation: fl-blink 1.4s ease-in-out infinite; }
@keyframes fl-blink { 50% { opacity: 0.25; } }

/* marquee */
.fl-marquee { overflow: hidden; white-space: nowrap; display: flex; }
.fl-marquee-track { display: inline-flex; animation: fl-scroll 38s linear infinite; gap: 48px; padding-right: 48px; }
@keyframes fl-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* halftone dot grid background */
.fl-dotbg {
  background-image: radial-gradient(circle, var(--rule) 1px, transparent 1px);
  background-size: 14px 14px;
}
.fl-stripebg {
  background-image: repeating-linear-gradient(135deg, transparent 0 14px, var(--soft) 14px 15px);
}

/* container with thin rule */
.fl-card-rule { border: 1px solid var(--rule); padding: 28px; }

/* hover lift */
.fl-lift { transition: transform .2s ease, box-shadow .2s ease; }
.fl-lift:hover { transform: translateY(-2px); }

/* sr-only */
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* page transitions */
.fl-fade { animation: fl-fade-in .35s ease both; }
@keyframes fl-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* selection */
::selection { background: var(--signal); color: var(--signal-fg); }

/* hide scrollbars for inner scrollers when desired */
.fl-noscroll::-webkit-scrollbar { display: none; }

/* responsive */
@media (max-width: 900px) {
  :root { --pad-section: 72px; --pad-block: 32px; --gutter: 20px; }
}