Sovran_SystemsOS/app/sovran_systemsos_web/static/css/base.css

/* Sovran_SystemsOS Hub — Web UI Stylesheet
   The Hub redesign — softer dark theme, GNOME 50 / libadwaita surfaces,
   Sovran green reserved for status and actions.

   Design tokens are defined once here. Legacy variable names from the
   previous theme are aliased to the new values so every stylesheet
   (support, security, domain-setup, onboarding, …) re-skins without
   needing per-rule edits. */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  color-scheme: dark;

  /* ── The Hub palette ─────────────────────────────────────────── */
  --bg:            #17191d;
  --surface:       #1c1f24;
  --card:          #23272c;
  --card-hover:    #292e34;
  --elevated:      #26292e;
  --inset:         #121417;
  --border:        rgba(255, 255, 255, 0.07);
  --border-strong: rgba(255, 255, 255, 0.14);
  --text:          #e9edec;
  --text-2:        #a9b0b3;
  --text-3:        #7a8388;
  --accent:        #3ecf8e;
  --accent-strong: #42f39a;
  --accent-deep:   #1aa45d;
  --accent-dim:    rgba(66, 243, 154, 0.12);
  --amber:         #e9b64a;
  --red:           #f66151;
  --blue:          #78aeed;
  --mono:          'JetBrains Mono', 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --radius-card:   20px;
  --radius-dialog: 26px;
  --shadow-card:   0 10px 30px rgba(0, 0, 0, 0.25);
  --shadow-hover:  0 16px 36px rgba(0, 0, 0, 0.38);
  --shadow-pop:    0 30px 80px rgba(0, 0, 0, 0.5);

  /* ── Legacy aliases (previous theme) — keep every old sheet working */
  --bg-color:        var(--bg);
  --surface-color:   var(--surface);
  --card-color:      var(--card);
  --border-color:    var(--border);
  --text-primary:    var(--text);
  --text-secondary:  var(--text-2);
  --text-dim:        var(--text-3);
  --accent-color:    var(--accent);
  --green:           var(--accent);
  --yellow:          var(--amber);
  --red:             var(--red);
  --grey:            var(--text-3);
  --radius-btn:      12px;
}

html, body {
  height: 100%;
}

body {
  font-family: Inter, Cantarell, 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  overflow: hidden;
}

button { font-family: inherit; }

::selection { background: rgba(66, 243, 154, 0.25); }

/* ── Scrollbars ─────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); border-radius: 99px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.18); background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* ── Login page ─────────────────────────────────────────────────── */

.login-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
  position: relative;
  z-index: 1;
}

.login-card {
  width: 100%;
  max-width: 402px;
  text-align: center;
  background: var(--elevated);
  border: 1px solid var(--border-strong);
  border-radius: 28px;
  padding: 46px 42px 38px;
  box-shadow: var(--shadow-pop);
}

.login-header {
  text-align: center;
  margin-bottom: 26px;
}

.login-logo {
  width: 78px;
  height: 78px;
  margin-bottom: 18px;
  filter: drop-shadow(0 8px 24px rgba(28, 196, 120, 0.3));
}

.login-title {
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.login-title em { font-style: normal; color: var(--accent); }

.login-sub {
  color: var(--text-2);
  font-size: 0.85rem;
  margin: 7px 0 0;
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.form-group label {
  display: block;
  font-size: 0.8rem;
  font-weight: 650;
  color: var(--text-2);
  margin-bottom: 6px;
  text-align: left;
}

.form-group input {
  width: 100%;
  padding: 11px 16px;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--inset);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  outline: 0;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-group input:focus {
  border-color: rgba(66, 243, 154, 0.55);
  box-shadow: 0 0 0 3px rgba(66, 243, 154, 0.13);
}

.btn-login {
  width: 100%;
  padding: 12px;
  border-radius: 99px;
  background: linear-gradient(180deg, #3fd68e, #1ea263);
  color: #04220f;
  font-size: 0.92rem;
  font-weight: 700;
  margin-top: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 6px 18px rgba(35, 199, 124, 0.22);
}

.btn-login:hover:not(:disabled) {
  filter: brightness(1.08);
}

.login-error {
  background: rgba(246, 97, 81, 0.10);
  border: 1px solid rgba(246, 97, 81, 0.35);
  color: #f8a39b;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 0.85rem;
  display: none;
}

.login-error.visible {
  display: block;
}