/* ══════════════════════════════════════════════════════════════════════
   Metafuture shared theme  ·  /assets/mf-theme.css
   ----------------------------------------------------------------------
   ONE file that themes the landing, login, client portal, admin overview,
   Deribit desk and research KB. Every page already drives its components
   off these tokens, so changing a value here changes every surface.

   Load this AFTER each page's own <style> block — same specificity, later
   in document order wins, so this overrides the page's local :root without
   any page needing its CSS rewritten.

   Palette (2026-08-30, "make it like Pendle"): ink-navy ground #090d18,
   steel-blue washes rgba(191,203,223,x), teal #1be3c2 + blue #7ab7ff
   accents, Pendle gold for warnings. Fonts: Inter body, Poppins display.
   ══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;450;500;600;700&family=Poppins:wght@500;600;700&display=swap');

:root{
  /* ground ─────────────────────────────────────────────────────────── */
  --bg:      #090d18;
  --panel:   #0e1524;
  --panel2:  #111a2c;
  --raise:   #1a2438;

  /* rules — steel-blue alpha, Pendle's #BFCBDF card hairlines */
  --line:    rgba(191,203,223,.10);
  --line2:   rgba(191,203,223,.18);

  /* type ───────────────────────────────────────────────────────────── */
  --txt:     #fff;
  --muted:   rgba(191,203,223,.66);
  --mut:     rgba(191,203,223,.66);   /* alias: admin/deribit/research   */
  --faint:   rgba(191,203,223,.38);
  --fnt:     rgba(191,203,223,.38);   /* alias                           */

  /* brand accent — Pendle teal + soft blue ─────────────────────────── */
  --accent:  #1be3c2;
  --grad1:   #1be3c2;
  --grad2:   #7ab7ff;
  --fee:     #7ab7ff;
  --cyan:    #7ab7ff;

  /* semantic — retuned to sit on pure black without glowing ───────── */
  --pos:     #3ce9bd;
  --neg:     #ff7488;
  --warn:    #f0ce74;   /* Pendle gold */
  --err:     #ff7488;
  --ok:      #3ce9bd;

  --sans: 'Inter',system-ui,-apple-system,sans-serif;
  --disp: 'Poppins','Inter',sans-serif;
  --code: 'Geist Mono','JetBrains Mono',ui-monospace,monospace;
}

/* ── ground: flat black + the landing page's faint overhead cone ───── */
html,body{
  background-color:var(--bg) !important;
  color:var(--txt);
  font-family:var(--sans);
}
body{
  background-image:
    radial-gradient(52vw 54vh at 50% -14%, rgba(27,227,194,.085), transparent 62%),
    radial-gradient(90vw 46vh at 16% -18%, rgba(122,183,255,.06), transparent 64%),
    radial-gradient(120vw 90vh at 50% 120%, rgba(9,13,24,.85), transparent 62%) !important;
  background-attachment:fixed;
}

/* ── type roles: display thin + tight, everything small is mono ────── */
.disp{ font-family:var(--disp); font-weight:600; letter-spacing:-.02em; }
.mono{ font-family:var(--code); letter-spacing:.01em; }
.label{
  font-family:var(--code); font-weight:400;
  font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
/* figures in mono — this is where the institutional read comes from */
.nums{ font-family:var(--code); font-variant-numeric:tabular-nums; }

/* ── panels: near-black with a hairline, no gradient, tighter radius ─ */
.panel{
  background:var(--panel) !important;
  border:1px solid var(--line);
  border-radius:12px;
}
.divgrid{ background:var(--line); border:1px solid var(--line); border-radius:12px; }
.divgrid > *{ background:var(--panel); }

/* ── tables: mono headers, dashed rules like the landing spec sheet ── */
table.dt th{
  font-family:var(--code); font-weight:400;
  font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); border-bottom:1px solid var(--line);
}
table.dt td{ border-bottom:1px dashed rgba(191,203,223,.12); }
table.dt tbody tr:last-child td{ border-bottom:0; }

/* ── chips / segmented controls ────────────────────────────────────── */
.chip{ font-family:var(--code); font-size:11px; letter-spacing:.04em; border-color:var(--line2); }
.seg-b.on{ background:var(--raise); color:#fff; }

/* the 2px brand bar at the top of panels — the one flash of colour */
.topbar{ background:linear-gradient(90deg,var(--grad1),var(--grad2)); }
.gtext{ background:linear-gradient(100deg,var(--grad1),var(--grad2));
        -webkit-background-clip:text; background-clip:text; color:transparent; }

::selection{ background:rgba(27,227,194,.30); }

/* skeleton loaders on a black ground */
.skel{ background:linear-gradient(90deg, rgba(191,203,223,.05), rgba(191,203,223,.11), rgba(191,203,223,.05)); }

/* ── buttons, matched to the landing ───────────────────────────────── */
.mf-btn{
  font-family:var(--code); font-size:11px; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; text-decoration:none;
  padding:11px 20px; border-radius:7px; display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--line2); color:#fff; background:rgba(191,203,223,.05);
  transition:border-color .3s, background .3s, transform .3s;
}
.mf-btn:hover{ border-color:rgba(191,203,223,.5); background:rgba(191,203,223,.10); }
.mf-btn-1{ background:linear-gradient(100deg,var(--grad1),var(--grad2)); color:#04060c; border-color:transparent; }
.mf-btn-1:hover{ transform:translateY(-1px); opacity:.9; }

@media(prefers-reduced-motion:reduce){ .skel{ animation:none; } }