@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --spc-ink: #0A0A0C;
  --spc-graphite: #141419;
  --spc-slate: #1E1F26;
  --spc-line: #2A2B34;
  --spc-silver-1: #D9DCE3;
  --spc-silver-2: #9A9FAC;
  --spc-ember: #E0782E;
  --spc-text: #EEF0F4;
  --spc-muted: #A0A5B2;
  --spc-font: "Manrope", "Segoe UI", system-ui, sans-serif;
  --spc-mono: "IBM Plex Mono", Consolas, monospace;
  --primary: var(--spc-ember);
  --secondary: var(--spc-silver-2);
}

body, body[data-typography="poppins"] { font-family: var(--spc-font); background: var(--spc-ink); color: var(--spc-text); }
.num { font-family: var(--spc-mono); font-variant-numeric: tabular-nums; }

/* light theme: same token names, inverted values -- everything below that reads var(--spc-*) picks this
   up automatically once [data-theme-version="light"] is set (see js/theme-toggle.js) */
[data-theme-version="light"] {
  --spc-ink: #F5F5F7;
  --spc-graphite: #FFFFFF;
  --spc-slate: #ECEDF0;
  --spc-line: #DFE1E6;
  --spc-silver-1: #23242B;
  --spc-silver-2: #53565F;
  --spc-text: #14151A;
  --spc-muted: #5B5F6B;
}

/* logo-lockup.svg is a light-on-dark asset, so the shell that carries it stays pinned dark regardless of
   theme -- only .content-body/.card (the actual page content) flips. Unconditional now (was previously
   scoped to [data-theme-version="dark"], which is now also true of the light theme's default state). */
.nav-header, .header, .dlabnav, .footer {
  --spc-ink: #0A0A0C;
  --spc-graphite: #141419;
  --spc-slate: #1E1F26;
  --spc-line: #2A2B34;
  --spc-silver-1: #D9DCE3;
  --spc-silver-2: #9A9FAC;
  --spc-text: #EEF0F4;
  --spc-muted: #A0A5B2;
  background: var(--spc-ink) !important;
  border-color: var(--spc-line) !important;
}
[data-theme-version="dark"] .content-body { background: var(--spc-graphite) !important; }
[data-theme-version="dark"] .card { background: var(--spc-slate); border: 1px solid var(--spc-line); color: var(--spc-text); }
[data-theme-version="dark"] .card-title, [data-theme-version="dark"] h1, [data-theme-version="dark"] h2, [data-theme-version="dark"] h3, [data-theme-version="dark"] h4, [data-theme-version="dark"] h5 { color: var(--spc-text); }
.dlabnav .metismenu > li > a { color: var(--spc-muted); }
.dlabnav .metismenu > li > a:hover, .dlabnav .metismenu > li.mm-active > a { color: var(--spc-text); }
.btn-primary { background: var(--spc-ember); border-color: var(--spc-ember); color: #fff; }
.btn-primary:hover { background: #c8681f; border-color: #c8681f; }
.form-control { background: var(--spc-ink); border-color: var(--spc-line); color: var(--spc-text); font-family: var(--spc-mono); }
.form-control:focus { background: var(--spc-ink); color: var(--spc-text); border-color: var(--spc-ember); box-shadow: none; }
.text-muted, .form-text { color: var(--spc-muted) !important; }
a { color: var(--spc-silver-1); }

/* light/dark theme toggle */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--spc-line);
  color: var(--spc-text);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.theme-toggle:hover { border-color: var(--spc-silver-1); color: var(--spc-silver-1); }
.theme-toggle__icon { display: none; font-size: 13px; }
[data-theme-version="dark"] .theme-toggle__icon--light,
[data-theme-version="light"] .theme-toggle__icon--dark { display: inline-block; }

/* standalone login page */
.login-page { margin: 0; min-height: 100vh; display: grid; place-items: center; background: radial-gradient(70% 60% at 70% 20%, rgba(217,220,227,.08), transparent 60%), var(--spc-ink); padding: 24px; }
.login-card { width: 100%; max-width: 400px; background: var(--spc-graphite); border: 1px solid var(--spc-line); border-radius: 14px; padding: 32px; }
.login-card h1 { font-size: 20px; margin: 22px 0 18px; font-weight: 700; }
.login-card label { display: block; font-size: 12.5px; color: var(--spc-muted); margin: 14px 0 6px; }
.login-card input { display: block; width: 100%; margin-top: 6px; padding: 11px 13px; border-radius: 10px; border: 1px solid var(--spc-line); background: var(--spc-ink); color: var(--spc-text); font-family: var(--spc-mono); font-size: 15px; box-sizing: border-box; }
.login-card input:focus { outline: 2px solid var(--spc-ember); border-color: transparent; }
.login-card button { width: 100%; margin-top: 22px; padding: 12px; border: none; border-radius: 10px; background: linear-gradient(120deg, #EEF0F4, #B9BEC9); color: var(--spc-ink); font-weight: 700; font-family: var(--spc-font); cursor: pointer; }
.login-card .error { color: #F87171; font-size: 13px; margin-top: 12px; }
.login-card .error ul { margin: 0; padding-left: 18px; }
.login-card .hint { color: var(--spc-muted); font-size: 12px; text-align: center; margin: 16px 0 0; }