/* Neuro-Link 2026 brand tokens. No magic hex inline anywhere — reference these. */
:root {
  /* Brand palette */
  --deep-cove: #090f4a; /* app background / nav */
  --cobalt: #2e3884; /* panels, secondary surfaces */
  --gold-drop: #ff7e00; /* primary accent, CTAs, active states */
  --porcelain: #f1f1f1; /* primary text on dark */
  --pale-sky: #71777c; /* muted text */
  --grey-goose: #c9cfd3; /* borders, dividers, table rules */

  /* Light tokens (HQ-style: dark chrome, LIGHT content) */
  --surface: #ffffff; /* white cards */
  --ink: #0c1233; /* dark navy text/headings on light surfaces */
  --line: #e2e5ef; /* hairline borders / table rules on light */
  --page-bg: #f1f2f6; /* near-white page background */
  --sidebar-bg: #070c3a; /* a shade deeper than deep-cove for chrome */

  /* Derived surfaces (tuned for the dark shell) */
  --cove-2: #0d164f; /* slightly raised background */
  --cobalt-2: #283172; /* panel hover / header rows */
  --cobalt-line: #3a4596; /* panel borders on dark */
  --gold-drop-dark: #e56f00;
  --ink-muted: #9aa3b2; /* muted text on dark panels */

  /* Status */
  --ok: #21c265;
  --warn: #ffb020;
  --danger: #e0413b;
  --info: #4f9dff;

  /* Typography */
  --font-body: 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: 'Helvetica Neue', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Geometry */
  --radius: 10px;
  --radius-sm: 7px;
  --gap: 18px;
  --sidebar-w: 232px;
  --header-h: 60px;
}

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

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  background: var(--page-bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}

a {
  color: var(--gold-drop);
  text-decoration: none;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  margin: 0;
}

/* Brand marks (official PNG assets) */
/* Header lockup (icon + wordmark, no tagline) — orange on the deep-cove bar. */
.nl-lockup {
  display: block;
  height: 30px;
  width: auto;
  max-width: 60vw;
}
/* Full primary lockup incl. strapline — white login card. */
.nl-primary {
  display: block;
  width: 300px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

/* Buttons — shared by the dark app shell AND the white login card, so they live
   in brand.css (loaded everywhere) rather than app.css (app pages only). */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--cobalt-line);
  background: var(--cobalt-2);
  color: var(--porcelain);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease;
}
.btn:hover {
  background: var(--cobalt-line);
}
.btn-primary {
  background: var(--gold-drop);
  border-color: var(--gold-drop);
  color: var(--deep-cove);
}
.btn-primary:hover {
  background: var(--gold-drop-dark);
  border-color: var(--gold-drop-dark);
}
.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}