/* ============================================================
   SPAD — Obsidian Chrome theme
   Onyx #0A0A0A · Blue Slate #536878 · Alabaster Grey #E5E4E2
   Overrides base design-system tokens + buttons/surfaces.
   Loaded AFTER the app stylesheet, so these win.
   ============================================================ */

:root{
  --bg:#0A0A0A;
  --bg-2:#0A0A0A;

  /* cards / panels → lighter onyx-slate glass so they separate from the bg */
  --panel:#141922f2;
  --panel-2:#1b2230f7;
  --panel-3:#232c38;

  /* text → alabaster */
  --txt:#E5E4E2;
  --txt-2:#E5E4E2;
  --ink:#E5E4E2;
  --ink-hover:#ffffff;
  --ink-txt:#0A0A0A;
  --placeholder:#64727f;

  /* muted → slate-grey */
  --mut:#9fb0bf;
  --mut-2:#71818f;

  /* lines / borders → visible blue slate */
  --line:#2f3a46;
  --line-2:#536878aa;
  --line-active:#7b93a6;

  /* "silver" family (light high-contrast surfaces) → alabaster */
  --silver:#E5E4E2;
  --silver-light:#F4F4F2;
  --silver-bg:#53687826;
  --silver-border:#E5E4E2cc;

  /* brand accent → blue slate */
  --brand:#8ea1b3;
  --brand-wash:#53687826;
  --brand-line:#53687899;

  /* brighter rim so glass card edges read against the gradient */
  --edge:linear-gradient(135deg,#E5E4E2b3,#536878 30%,#53687826 58%,#E5E4E2cc);

  color-scheme:dark;
}

/* ---- Page background: the Obsidian Chrome gradient ----
   Onyx across the top, a Blue-Slate glow in the middle,
   Alabaster near the bottom edge. Fixed to the viewport. */
html,body{background:#0A0A0A;}
body{
  background:
    radial-gradient(125% 90% at 50% 116%,
      #E5E4E2 0%,
      #BCC4CC 6%,
      #8795A3 16%,
      #536878 30%,
      #41505D 44%,
      #2A3540 60%,
      #161D26 78%,
      #0A0A0A 100%) fixed;
  min-height:100vh;
}

/* top glow + dot grid → slate */
.page-glow{background:radial-gradient(70% 55% at 50% 0,#53687840,#0000 70%)!important;}
.page-glow:after{background-image:radial-gradient(#5368783d 1px,#0000 1px)!important;}

/* wordmark shimmer → slate-chrome */
.chrome{background-image:linear-gradient(115deg,#F4F4F2,#E5E4E2 26%,#536878 46%,#F4F4F2 56%,#8ea1b3 74%,#F4F4F2 100%)!important;}

/* header blends into onyx top */
.topbar{background:linear-gradient(#0A0A0Aee 0%,#0A0A0Ab3 70%,#0A0A0A00 100%)!important;}

/* ---- Glass panels: blur + a visible slate border for separation ---- */
.card,.hcard,.launch-card,.tcard,.bar,.panel,.port,.gpt-preview,.nav-menu,.toast{
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%);
}
.card,.launch-card,.tcard,.bar,.panel,.gpt-preview{
  border:1px solid #53687859;
  box-shadow:0 10px 34px #00000066;
}

/* ============================================================
   BUTTONS — primary = solid Blue Slate, not chrome
   ============================================================ */
.btn.brand,.btn.ink,.btn.green,.topbar .btn.white,.btn.white{
  background:#536878!important;
  background-image:none!important;
  color:#F4F4F2!important;
  text-shadow:none!important;
  animation:none!important;
  border:1px solid #7b93a6!important;
  box-shadow:inset 0 1px 0 #ffffff33, 0 3px 10px #00000066!important;
}
.btn.brand:hover,.btn.ink:hover,.btn.green:hover,.topbar .btn.white:hover{
  background:#657e92!important;
  filter:none!important;
  border-color:#9fb6c7!important;
}

/* secondary / base buttons → readable slate-tinted, clear edge */
.btn{
  background:#1b2230!important;
  color:#E5E4E2!important;
  border:1px solid #53687873!important;
}
.btn:hover{background:#243040!important;border-color:#7b93a6!important;}

/* outline buttons */
.btn.ghost{
  background:#0f151e99!important;
  border:1px solid #E5E4E26b!important;
  color:#E5E4E2!important;
}
.btn.ghost:hover{background:#53687833!important;border-color:#E5E4E2!important;}

.btn:disabled{opacity:.4!important;background:#141922!important;border-color:#2f3a46!important;box-shadow:none!important;}

/* badges / metal chip → solid slate */
.chip.metal-chip{
  background:#536878!important;background-image:none!important;
  color:#F4F4F2!important;animation:none!important;
  box-shadow:inset 0 0 0 1px #7b93a6!important;
}

/* ---- Blue-Slate accents ---- */
a:not(.btn):not(.nav a):hover{color:#a9bccd;}
.chip.brand{background:#53687830!important;color:#c3d0dc!important;border:1px solid #53687899!important;}
.eyebrow.brand,.brand{color:#a9bccd;}
.input{border-color:#53687859!important;}
.input:focus{border-color:#7b93a6!important;box-shadow:0 0 0 3px #53687847!important;}
.range,.toggle input{accent-color:#536878!important;}
.port.filled.sel{border-color:#7b93a6!important;box-shadow:0 0 0 1px #7b93a6 inset,0 0 20px #53687840!important;}
.hcard.on,.card.selected{border-color:#7b93a6!important;}
::selection{background:#53687873;color:#F4F4F2;}

/* ============================================================
   SPAD — motion layer (GPU-friendly: transform/opacity only)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  /* living background: a slow slate glow drifting behind everything */
  body::before {
    content: "";
    position: fixed; inset: -20vmax;
    z-index: 0; pointer-events: none;
    background: radial-gradient(38vmax 38vmax at 50% 92%, #53687840, transparent 60%);
    filter: blur(20px);
    animation: spad-drift 18s ease-in-out infinite alternate;
  }
  @keyframes spad-drift {
    0%   { transform: translate3d(-6%, 2%, 0) scale(1);    opacity: .7; }
    100% { transform: translate3d(6%, -3%, 0) scale(1.15); opacity: 1;  }
  }

  /* content rises in on first paint */
  main { animation: spad-rise .55s cubic-bezier(.22,.61,.36,1) both; }
  @keyframes spad-rise {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
  }

  /* cards lift + slate glow on hover */
  .card, .launch-card, .tcard, .panel, .hcard, .port, .gpt-preview {
    transition: transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease, border-color .25s ease;
    will-change: transform;
  }
  .card:hover, .launch-card:hover, .tcard:hover, .panel:hover, .hcard:hover, .port:hover, .gpt-preview:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 44px #00000073, 0 0 0 1px #53687899, 0 0 22px #53687833;
    border-color: #7b93a6;
  }

  /* buttons: gentle lift + a one-pass sheen on hover */
  .btn { transition: transform .15s ease, filter .15s ease, background .15s ease, border-color .15s ease; }
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(0) scale(.98); }
  .btn.brand, .btn.ink, .btn.green, .topbar .btn.white { position: relative; overflow: hidden; }
  .btn.brand::after, .btn.ink::after, .btn.green::after, .topbar .btn.white::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(110deg, transparent 20%, #ffffff40 50%, transparent 80%);
    transform: translateX(-120%); transition: transform .6s ease;
  }
  .btn.brand:hover::after, .btn.ink:hover::after, .btn.green:hover::after, .topbar .btn.white:hover::after {
    transform: translateX(120%);
  }

  /* nav links slide a soft slate pill in */
  .nav a { transition: color .15s ease, background .18s ease; }
  .nav a:hover { color: #E5E4E2; background: #53687826; }

  /* chips / badges breathe subtly */
  .chip.metal-chip { animation: spad-pulse 3.2s ease-in-out infinite; }
  @keyframes spad-pulse { 0%,100% { box-shadow: inset 0 0 0 1px #7b93a6; } 50% { box-shadow: inset 0 0 0 1px #7b93a6, 0 0 14px #53687866; } }

  /* extension hook icons gently float on hover of their card */
  .hcard:hover .hook-img, .hcard:hover .hcard-pic { transition: transform .3s ease; transform: translateY(-2px) scale(1.04); }

  /* inputs focus ring eases in */
  .input { transition: border-color .15s ease, box-shadow .2s ease; }
}

/* keep content above the drifting glow */
.topbar, main, .shell { position: relative; z-index: 1; }