/* Portal design tokens — single source of truth.
 *
 * Mirrors the marketing landing page (`landing.html`) so the signed-in
 * portal feels like the same product as the public marketing site.
 *
 * Per .theme_unification_plan.md (Phase 1): every authenticated page
 * picks this up via _nav.html. Per-template <style> blocks reference
 * these vars; no compat aliases (no --accent / --fg shims).
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  /* ── surfaces & ink ── */
  --paper:        #fafafa;   /* page bg                          */
  --paper-2:      #f3f4f6;   /* secondary surface (subtle band)  */
  --surface:      #ffffff;   /* card / section surface           */
  --ink:          #111418;   /* primary text                     */
  --ink-soft:     #4b5563;   /* secondary text                   */
  --ink-mute:     #6b7280;   /* tertiary text                    */
  --line:         #e5e7eb;   /* hairlines                        */
  --line-strong:  #d1d5db;   /* divider                          */

  /* ── brand accent ── */
  --teal:         #0aa39a;   /* primary accent                   */
  --teal-bg:      #e0f7f5;   /* accent surface                   */
  --teal-deep:    #047a72;   /* hover / press                    */

  /* ── status semantics (kept saturated; not brand color) ── */
  --good:         #059669;
  --good-bg:      #ecfdf5;
  --warn:         #d97706;
  --warn-bg:      #fef3c7;
  --bad:          #dc2626;
  --bad-bg:       #fee2e2;
  --info:         #1d4ed8;
  --info-bg:      #dbeafe;
  --unknown:      #6b7280;
  --unknown-bg:   #f3f4f6;

  /* ── effects ── */
  --shadow:       0 1px 2px rgba(15,23,42,0.04), 0 1px 3px rgba(15,23,42,0.06);
  --radius:       10px;

  /* ── layout ── */
  --container:    1180px;    /* portal-wide max width — locked   */
}

/* Body baseline matches the landing page. Per-template `body` rules
 * (background, padding) compose on top via class overrides; this just
 * sets typography + color so unstyled pages look right. */
html { background: var(--paper); }
body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
               system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* Mono for kickers, codes, breadcrumb pre-labels. Use the .mono class
 * or the <code> element. */
.mono, code {
  font-family: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.92em;
}

/* Default link treatment — teal accent, underline on hover only.
 * Per-page nav / breadcrumb links can override. */
a { color: var(--teal); text-decoration: none; }
a:hover { color: var(--teal-deep); text-decoration: underline; }

/* Scrollbar styling — quietly aligns with the rest of the surface. */
html { scrollbar-color: var(--line-strong) var(--paper); scrollbar-width: thin; }
::-webkit-scrollbar       { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb {
  background: var(--line-strong); border-radius: 6px;
  border: 2px solid var(--paper);
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-mute); }
::-webkit-scrollbar-corner { background: var(--paper); }