/* ============================================================
   AUTONOMOUS INTELLIGENCE LAUNCHPAD — Shared design theme.
   Loaded by every launchpad HTML page (launch.html, launch-token,
   launch-create, presale, lottery, predict, profile, compete,
   swap, whitepaper, admin) so the look-and-feel matches the
   reference design at /launch.

   Pairs with /launchpad-bg.js which injects the constellation
   canvas + ambient glow layers into <body> on load.

   This file ONLY defines:
     - design tokens (:root vars)
     - body / typography base
     - background layers (.bg-field, .bg-violet, #constellation)
     - shared nav (.nav, .nav-inner, .wordmark, .nav-links, .btn-glass)
     - shared section + button + glass surfaces
     - reveal animation
     - scrollbar / selection
     - prefers-reduced-motion overrides

   Page-specific styles (grids, modals, swap widget, etc.) stay
   in each page's own <style> block. They consume the variables
   defined here so colours stay consistent everywhere.
   ============================================================ */

:root{
  /* Deep gloss black substrate — earlier "dark slate" values (rgba 0.55-0.96
     blended over the constellation) read as grey because 5-40 % of the
     animation bled through. Bumped to near-opaque black so every card reads
     as solid obsidian gloss. The blur effect stays via backdrop-filter; the
     constellation only shows in the gaps BETWEEN cards. */
  --bg:#040508;
  --bg-elev:#080A0F;
  --card-bg:rgba(6,7,11,0.985);
  --glass:rgba(8,10,14,0.985);
  --glass-heavy:rgba(6,7,11,0.99);
  --glass-light:rgba(12,14,20,0.96);

  /* Accent colours — iOS inspired */
  --blue:#0A84FF;
  --blue-glow:rgba(10,132,255,0.45);
  --purple:#BF5AF2;
  --purple-glow:rgba(191,90,242,0.35);
  --teal:#64D2FF;
  --teal-glow:rgba(100,210,255,0.35);
  --green:#30D158;
  --red:#FF453A;
  --orange:#FF9F0A;

  /* Text */
  --text:#F2F2F7;
  --text-sec:#9898A4;
  --text-muted:#63636A;

  /* Borders & shadows */
  --border:rgba(255,255,255,0.08);
  --border-highlight:rgba(255,255,255,0.14);
  --border-strong:rgba(255,255,255,0.20);
  --shadow:0 8px 32px rgba(0,0,0,0.40);
  --shadow-lg:0 16px 48px rgba(0,0,0,0.56);
  --inner-shadow:inset 0 1px 0 rgba(255,255,255,0.08);

  /* Spatial — 8px base */
  --s1:8px; --s2:16px; --s3:24px; --s4:32px; --s5:48px; --s6:64px; --s7:96px; --s8:128px;
  --maxw:1280px;
  --maxw-trade:1600px;
  --radius:12px;
  --radius-lg:20px;
  --radius-pill:9999px;

  --font-display:-apple-system,"Space Grotesk",Inter,sans-serif;
  --font-body:-apple-system,Inter,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-ios:cubic-bezier(0.25,0.1,0.25,1);

  /* Compat aliases for legacy gold/cream tokens used by older launchpad
     pages. Mapped to the iOS-dark palette so a presale.html written
     against the old "obsidian/gold" tokens still renders coherently. */
  --white:#F2F2F7;
  --muted:#9898A4;
  --muted-2:#63636A;
  --obsidian:#0A0A0C;
  --obsidian-2:#0F0F12;
  --panel:rgba(6,7,11,0.985);
  --line:rgba(255,255,255,0.10);
  --hair-gold:rgba(255,212,107,0.35);
  --gold:#FFD46B;
  --gold-deep:#B8923D;
  --cyan:#64D2FF;
  --violet:#BF5AF2;
  --card-shadow:0 16px 40px rgba(0,0,0,0.45),inset 0 1px 0 rgba(255,255,255,0.06);
}

/* ============================================================
   Reset + body. Keep this minimal — pages may set their own
   font stacks or layouts, we just guarantee dark substrate +
   smooth typography defaults.
   ============================================================ */
.launchpad-themed *{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  position:relative;
}

/* ============================================================
   Ambient glow layers — auto-injected by /launchpad-bg.js, but
   the CSS lives here so the layers paint instantly even before
   the JS runs. The constellation canvas sits at z-index:-3 so
   every page content layer floats above it. The bg-field /
   bg-violet blobs are bigger, softer gradients that fill the
   gaps when constellation hasn't initialised yet.
   ============================================================ */
.bg-field{position:fixed;inset:0;z-index:-3;pointer-events:none;overflow:hidden}
.bg-field::before,.bg-field::after{content:"";position:absolute;border-radius:50%;filter:blur(100px);opacity:.35}
.bg-field::before{width:50vw;height:50vw;top:-10vw;left:-10vw;
  background:radial-gradient(circle at 40% 40%,var(--blue-glow),transparent 65%)}
.bg-field::after{width:45vw;height:45vw;bottom:-15vw;right:-10vw;
  background:radial-gradient(circle at 60% 60%,var(--purple-glow),transparent 65%)}
.bg-violet{position:fixed;z-index:-3;width:40vw;height:40vw;top:35%;left:50%;
  border-radius:50%;filter:blur(120px);opacity:.25;pointer-events:none;
  background:radial-gradient(circle,var(--teal-glow),transparent 65%)}
.grain{display:none}
#constellation{position:fixed;inset:0;z-index:-3;display:block;pointer-events:none}
.hero-fallback{position:fixed;inset:0;z-index:-3;display:none;pointer-events:none;background:var(--bg)}

/* ============================================================
   Shared nav — iOS Liquid Glass strip. Pages that don't ship
   their own <nav> can drop in this markup:
     <nav class="lp-nav nav">
       <div class="nav-inner">
         <a class="wordmark" href="/launch">...</a>
         <div class="nav-links">…</div>
       </div>
     </nav>
   ============================================================ */
.nav,.lp-nav{position:sticky;top:0;z-index:50;
  backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  background:rgba(10,10,12,0.72);
  border-bottom:1px solid var(--border)}
/* Three-column grid: wordmark left, nav-links centered in the middle,
   menu-toggle (mobile only) or empty cell on the right. The middle column
   takes whatever space it needs and is centered via justify-self, so
   Home / Discover / Create / Swap / etc. always sit visually in the dead
   center of the page regardless of viewport width. */
.nav-inner{max-width:100%;margin:0 auto;
  padding:var(--s2) clamp(14px,3.4vw,40px);
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:var(--s3)}
.nav-inner > .nav-links{justify-self:center}
.wordmark{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;color:var(--text)}
.glyph{font-family:var(--font-display);font-size:26px;color:var(--blue);line-height:1}
.wm-text{font-family:var(--font-display);font-weight:700;letter-spacing:.12em;
  font-size:13px;line-height:1.05;color:var(--text)}
.wm-text small{display:block;font-weight:600;font-size:9px;letter-spacing:.28em;
  color:var(--text-sec)}
.nav-links{display:flex;align-items:center;gap:var(--s4)}
.nav-links a{color:var(--text-sec);text-decoration:none;font-size:14px;font-weight:500;
  letter-spacing:.01em;transition:color .2s var(--ease-ios);position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-8px;height:2px;width:0;
  background:var(--blue);border-radius:2px;transition:width .2s var(--ease-ios)}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--text)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{width:100%}

/* ============================================================
   Shared buttons. Reuse on every page so primary actions
   look identical to the /launch hero CTA.
   ============================================================ */
.btn{font-family:var(--font-body);font-weight:600;cursor:pointer;border:none;
  font-size:14px;letter-spacing:.01em;border-radius:var(--radius);
  transition:transform .2s var(--ease-ios),box-shadow .2s var(--ease-ios),background .2s var(--ease-ios)}
.btn:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.btn-primary{
  background:linear-gradient(135deg,var(--blue) 0%,var(--purple) 100%);
  color:#fff;border:1px solid rgba(255,255,255,0.18);padding:11px 22px;font-weight:700;
  border-radius:var(--radius-pill);
  box-shadow:0 4px 18px rgba(10,132,255,0.40),inset 0 1px 0 rgba(255,255,255,0.20);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;white-space:nowrap}
.btn-primary:hover{transform:translateY(-1px);
  box-shadow:0 8px 28px rgba(10,132,255,0.55),inset 0 1px 0 rgba(255,255,255,0.30)}
.btn-glass{background:var(--glass-heavy);color:var(--text);
  border:1px solid var(--border-highlight);padding:10px 18px;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:var(--inner-shadow);text-decoration:none;display:inline-flex;
  align-items:center;gap:8px;border-radius:var(--radius)}
.btn-glass:hover{transform:translateY(-1px);
  box-shadow:0 4px 16px rgba(0,0,0,0.32);
  border-color:var(--border-strong)}
.btn-ghost{background:var(--glass);color:var(--text);padding:11px 22px;
  border:1px solid var(--border);border-radius:var(--radius-pill);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  display:inline-flex;align-items:center;gap:8px;text-decoration:none}
.btn-ghost:hover{transform:translateY(-1px);border-color:var(--border-strong)}
.menu-toggle{display:none;background:var(--glass-heavy);border:1px solid var(--border);
  border-radius:var(--radius);padding:8px 10px;cursor:pointer}
.menu-toggle span{display:block;width:18px;height:2px;background:var(--text-sec);margin:3px 0;border-radius:1px}

/* ============================================================
   Shared section + card glass surfaces. Page content blocks can
   use .lp-section / .lp-card to immediately match the design.
   ============================================================ */
.lp-section,.section-shared{max-width:var(--maxw);margin:0 auto;padding:var(--s5) clamp(14px,3.4vw,40px)}
.lp-section.is-wide{max-width:var(--maxw-trade)}
.sec-kicker{font-size:11.5px;letter-spacing:.20em;text-transform:uppercase;
  color:var(--text-sec);font-weight:600;margin-bottom:var(--s2)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--s3);flex-wrap:wrap;margin-bottom:var(--s5)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--teal);
  padding:6px 12px;border-radius:var(--radius-pill);
  background:rgba(100,210,255,0.10);border:1px solid rgba(100,210,255,0.25)}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 6px var(--teal-glow);animation:lp-pulse 2.4s var(--ease) infinite}
@keyframes lp-pulse{0%,100%{opacity:1}50%{opacity:.35}}

.lp-card{position:relative;border-radius:var(--radius-lg);padding:var(--s3);
  background:var(--card-bg);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}

/* ============================================================
   Headings + selection + scrollbar — match /launch.
   ============================================================ */
h1.lp-display,h2.lp-display{font-family:var(--font-display);font-weight:700;letter-spacing:-.015em;color:var(--text)}
h2.lp-display{font-size:clamp(30px,4vw,48px);line-height:1.05}
h2 .em,h2.lp-display .em{color:var(--blue)}

::selection{background:rgba(10,132,255,.28);color:var(--white)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--bg-elev)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.12);border-radius:8px;
  border:3px solid var(--bg-elev)}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.22)}
html{scrollbar-color:rgba(255,255,255,0.12) var(--bg-elev);scrollbar-width:thin}

/* ============================================================
   Reveal animation — pages can add .reveal to any element and
   /launchpad-bg.js will observe it and toggle .in when in view.
   ============================================================ */
.reveal{opacity:0;transform:translateY(28px);
  transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ============================================================
   prefers-reduced-motion — kill animations + fall back to the
   static gradient layers. The constellation canvas is hidden
   so we don't burn CPU for someone who explicitly opted out.
   ============================================================ */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important}
  #constellation{display:none}
  .hero-fallback{display:block}
  .reveal{opacity:1!important;transform:none!important;transition:none!important}
}

/* ============================================================
   FROSTED-GLASS OVERRIDE BAND
   ============================================================
   Without this, legacy pages (presale, lottery, predict, profile,
   whitepaper, the original cream/gold builds) end up rendering
   their cards with either (a) the original light-cream
   background, which fights the dark substrate, or (b) a low-
   opacity rgba that lets the constellation bleed through and
   reads as grey. Both look broken.

   We force every common card / panel / surface utility used by
   the launchpad to a uniform dark-frosted background so the
   ENTIRE site feels like one design. This is intentionally
   aggressive — we override with !important and target every
   class that historically held a panel background. If a page
   genuinely needs a translucent surface, it can override with
   a more specific selector.
   ============================================================ */
/* The classes named here are ONLY used on legacy pages (presale,
   lottery, predict, profile, whitepaper, compete). The /launch and
   /launch-token cards (.dh-card, .tdm-card, .dex-card, .hud, etc.)
   already ship with proper dark gradients tuned to that page — we
   leave them alone on purpose, otherwise this override would clobber
   the carefully-styled jarvis chips + verified glow + card shadow.

   Background is a glossy obsidian gradient: deep black at the bottom,
   slightly lifted near the top with a thin highlight line so it reads
   as polished glass, not a flat matte panel. Inset highlight + outer
   drop shadow give it depth. */
.card,
.lp-card,
.panel,
.box,
.glass,
.glass-card,
.surface,
.modal-card,
.sheet,
.tile,
.section-card,
.stat-card,
.feed-card,
.aside-card,
.bp-card,
.b-card,
.s-card,
.t-card,
.profile-card,
.predict-card,
.lottery-card,
.presale-card,
.compete-card,
.admin-card,
.creator-card,
.info-card,
.connect-card,
.prompt-box,
.prompt-scene .panel,
.review-grid .panel,
.scene .panel,
.scene-card,
.review-card,
.draft-card,
.copilot-card,
.thinking{
  background:
    linear-gradient(180deg,rgba(255,255,255,0.045) 0%,rgba(255,255,255,0) 22%),
    linear-gradient(180deg,#0A0B12 0%,#04060B 100%) !important;
  border:1px solid rgba(255,255,255,0.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 14px 36px rgba(0,0,0,0.55),
    0 2px 6px rgba(0,0,0,0.35) !important;
  color:var(--text);
}

/* Modal surfaces — sit ONE shade above a regular card so dialogs read
   as elevated. Still glossy black, no see-through. */
.modal,
.modal-card,
.sheet{
  background:
    linear-gradient(180deg,rgba(255,255,255,0.06) 0%,rgba(255,255,255,0) 24%),
    linear-gradient(180deg,#0D0F18 0%,#06080F 100%) !important;
  border:1px solid rgba(255,255,255,0.10) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    0 24px 64px rgba(0,0,0,0.65) !important;
}

/* Catch-all for any element on a legacy page that's still showing a grey
   wash from a `background:#xxxx` or `rgba(255,255,255, …)` inline. We
   target the most common "section/wrap/container" patterns the legacy
   builds use. Lower specificity than the explicit card list above. */
.wrap,
.content-wrap,
.page-wrap,
.container,
.inner-wrap,
.section-wrap,
.app-section,
.module,
.module-card,
.widget-card,
.dashboard-card,
.stats-card,
.token-card{
  background:
    linear-gradient(180deg,rgba(255,255,255,0.04) 0%,rgba(255,255,255,0) 20%),
    linear-gradient(180deg,#0A0B12 0%,#04060B 100%) !important;
  border:1px solid rgba(255,255,255,0.07);
  color:var(--text);
}

/* Anything with a class that ENDS in '-card' or '-panel' but wasn't
   explicitly listed above — sweep coverage so a page we forgot still
   gets the gloss treatment. Excludes .dh-card, .tdm-card, .dex-card
   via the :not() filters so /launch keeps its bespoke cards. */
[class$="-card"]:not(.dh-card):not(.tdm-card):not(.dex-card):not(.b-card),
[class$="-panel"]{
  background:
    linear-gradient(180deg,#0A0B12 0%,#04060B 100%);
  border:1px solid rgba(255,255,255,0.07);
  color:var(--text);
}

/* Inline pills / chips often inherit a grey background from old gold-on-
   cream styles. Force them to dark glass so they read consistently. */
.chip,
.pill,
.badge:not(.dh-tag):not(.tdm-src):not(.b-card){
  background:rgba(255,255,255,0.05) !important;
  border:1px solid var(--border) !important;
  color:var(--text-sec);
}

/* Inputs + selects on legacy cream pages were styled white-on-cream.
   Re-skin them to the dark frosted look so they don't pop out of the
   page like a Word document. */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="search"],
input[type="url"],
input[type="tel"],
textarea,
select{
  background:rgba(255,255,255,0.04);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
input::placeholder,
textarea::placeholder{color:var(--text-muted)}
input:focus,
textarea:focus,
select:focus{
  outline:none;
  border-color:var(--blue);
  box-shadow:0 0 0 3px rgba(10,132,255,0.15);
  background:rgba(255,255,255,0.06);
}

/* Tables sometimes ship with white bg + dark text on the legacy pages.
   Make the cells inherit the dark theme. */
table{color:var(--text)}
table thead,
table tbody,
table th,
table td{
  background:transparent;
  border-color:var(--border);
}

/* Body bg-elev surfaces (sticky sub-nav strips, footers) lose their
   grey wash. */
.subnav,
.section-strip,
.footer-strip,
footer{
  background:rgba(10,10,12,0.92);
  border-color:var(--border);
  color:var(--text-sec);
}

/* Mobile perf override — strip backdrop-filter on phones because
   each blurred element forces an offscreen composite per frame even
   when the page is idle. Matches the override already on /launch so
   the rest of the launchpad has the same FPS budget on mid-tier
   phones. Background canvas stays. */
@media(max-width:760px){
  .nav,.lp-nav,.lp-card{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .nav,.lp-nav{background:rgba(10,10,12,0.98)}
}
