/**
 * Design tokens and base resets.
 *
 * Loaded BEFORE app.css. This is the start of a per-domain CSS split. The next
 * pass (2b) will continue extracting layout / components / forms / tables /
 * payroll / modals into their own files and introduce a bundler.
 */

:root {
  --bg: #070b10;
  --bg-soft: #0c121a;
  --panel: #111a24;
  --panel-2: #162230;
  --line: #263747;
  --line-strong: #365066;
  --text: #edf6ff;
  --muted: #91a4b8;
  --accent: #29d39a;
  --accent-2: #35a7ff;
  --warning: #ffbd4a;
  --danger: #ff6b6b;
  --ok: #48e6a4;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

* {
  box-sizing: border-box;
  scrollbar-width: thin;
  scrollbar-color: rgba(41, 211, 154, 0.8) rgba(8, 13, 19, 0.78);
}

*::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

*::-webkit-scrollbar-track {
  border-radius: 999px;
  background: rgba(8, 13, 19, 0.78);
}

*::-webkit-scrollbar-thumb {
  border: 2px solid rgba(8, 13, 19, 0.78);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ok), var(--accent-2));
}

*::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #5af0b5, #6fc1ff);
}

html,
body {
  /* Prevent any descendant rogue width from causing page-level horizontal scroll. */
  overflow-x: hidden;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: "Segoe UI", Candara, "Trebuchet MS", sans-serif;
  background:
    linear-gradient(120deg, rgba(41, 211, 154, 0.12), transparent 28%),
    linear-gradient(250deg, rgba(53, 167, 255, 0.12), transparent 32%),
    var(--bg);
}

body.app-booting .login-view,
body.app-booting .workspace {
  visibility: hidden;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

a {
  color: inherit;
}