/* charter.css — single source of design tokens + shared primitives for the
   portal's own pages (root, login, landing). Served UNGATED at /charter.css:
   it contains no client material and the pre-auth login page needs it.
   The board engine (Knowledge-Base repo) mirrors these token values. */

:root {
  /* dark — warm true-black (the dbenbouzid charter) */
  --bg: #13110f;
  --surface: #1a1815;
  --text: #f5f3f0;
  --text2: #b3ada6;
  --muted: #8a837c;
  --border: #2a2624;
  --accent: #ef4444;
  --ember: linear-gradient(90deg, #dc2626, #ef4444 55%, #f97316);
  --focus: #ef4444;
  color-scheme: dark;
}

/* light — warm paper. Same block twice: once as the system default,
   once as the explicit override. Keep the two in sync. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #f7f3ec;
    --surface: #fffdf9;
    --text: #1d1a17;
    --text2: #5d564e;
    --muted: #6b6259;
    --border: #e6ddd1;
    --accent: #b91c1c;
    --focus: #b91c1c;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --bg: #f7f3ec;
  --surface: #fffdf9;
  --text: #1d1a17;
  --text2: #5d564e;
  --muted: #6b6259;
  --border: #e6ddd1;
  --accent: #b91c1c;
  --focus: #b91c1c;
  color-scheme: light;
}

:root {
  --font-text: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 20px;
}

* { box-sizing: border-box }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 15px/1.6 var(--font-text);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  transition: background-color .2s ease, color .2s ease;
}
::selection { background: rgba(239, 68, 68, .3); color: var(--text) }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 3px }

a { color: var(--text2); text-decoration: none }
a:hover { color: var(--accent) }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 560;
  letter-spacing: -.015em; line-height: 1.12; color: var(--text); margin: 0;
}

.eyebrow {
  font: 700 11px/1 var(--font-text); text-transform: uppercase;
  letter-spacing: .14em; color: var(--accent); margin: 0;
}

/* the signature: a short ember dash, once per page */
.ember { width: 64px; height: 2px; border-radius: 1px; background: var(--ember) }

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 13.5px/1 var(--font-text); padding: 10px 17px;
  border-radius: var(--radius-pill); border: 1px solid var(--border);
  color: var(--text); background: transparent; cursor: pointer;
  text-decoration: none; transition: border-color 180ms, color 180ms;
}
.btn:hover { border-color: var(--accent); color: var(--text) }
.btn.primary { border-color: transparent; background: var(--ember); color: #fff }
.btn.primary:hover { filter: brightness(1.06) }
.btn .ic { font-size: 12px; opacity: .85 }

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition: border-color 180ms;
}

/* theme toggle — one quiet control, top-right */
.theme-toggle {
  position: fixed; top: 18px; right: 18px; z-index: 50;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface);
  color: var(--muted); cursor: pointer; font-size: 15px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { color: var(--text); border-color: var(--accent) }

@media (prefers-reduced-motion: reduce) {
  body, .btn, .card { transition: none }
}