/* ═══════════════════════════════════════════════════════════════════════════
   UpJacket Theme — site-wide visual layer (loaded LAST on every page)
   ─────────────────────────────────────────────────────────────────────────────
   Direction: warm paper canvas, ink-on-paper contrast, serif display headings,
   amber accents. This layer redefines the shared CSS variables and restyles
   the common component classes; page-specific layouts are untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap');

:root {
  /* UpJacket palette — warm paper + ink + amber */
  --uj-ink: #1c1917;
  --uj-ink-soft: #44403c;
  --uj-muted: #78716c;
  --uj-faint: #a8a29e;
  --uj-line: #e7e0d8;
  --uj-line-soft: #f0ebe4;
  --uj-surface: #ffffff;
  --uj-canvas: #f8f6f2;
  --uj-panel: #fcfaf7;
  --uj-accent: #b45309;
  --uj-accent-hover: #92400e;
  --uj-accent-soft: #fdf1e3;
  --uj-ink-btn: #1c1917;
  --uj-danger: #b42318;
  --uj-ok: #067647;
  --uj-shadow: 0 1px 2px rgba(28, 25, 23, .05), 0 10px 32px rgba(28, 25, 23, .07);
  --uj-shadow-lg: 0 2px 4px rgba(28, 25, 23, .06), 0 24px 56px rgba(28, 25, 23, .14);
  --uj-radius: 14px;
  --uj-font-ui: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
  --uj-font-display: "Source Serif 4", Charter, "Iowan Old Style", Georgia, serif;

  /* bridge the legacy variables every page consumes */
  --bg: var(--uj-surface);
  --bg0: var(--uj-surface);
  --bg1: var(--uj-canvas);
  --bg2: var(--uj-panel);
  --bg3: #f3efe9;
  --bg4: #ebe5dc;
  --border: var(--uj-line);
  --border-light: var(--uj-line-soft);
  --t1: var(--uj-ink);
  --t2: var(--uj-muted);
  --t3: var(--uj-faint);
  --accent: var(--uj-accent);
  --accent-light: var(--uj-accent-soft);
  --accent-ink: var(--uj-accent-hover);
  --radius: 12px;
  --radius-sm: 9px;
  --r: 12px;
  --rl: 14px;
  --shadow: var(--uj-shadow);
  --shadow-lg: var(--uj-shadow-lg);
  --focus-ring: 0 0 0 3px rgba(180, 83, 9, .18);

  /* ncc tokens used by quill.html + narration studio */
  --ncc-ink: var(--uj-ink);
  --ncc-muted: var(--uj-muted);
  --ncc-faint: var(--uj-faint);
  --ncc-line: var(--uj-line);
  --ncc-surface: var(--uj-surface);
  --ncc-canvas: var(--uj-canvas);
  --ncc-panel: var(--uj-panel);
  --ncc-accent: var(--uj-accent);
  --ncc-accent-soft: var(--uj-accent-soft);
  --ncc-accent-ink: var(--uj-accent-hover);
  --ncc-danger: var(--uj-danger);
  --ncc-shadow: var(--uj-shadow);
  --ncc-shadow-lg: var(--uj-shadow-lg);
}

/* ── shell ─────────────────────────────────────────────────────────────── */
html { background: var(--uj-canvas); }
body {
  background: var(--uj-canvas);
  color: var(--uj-ink);
  font-family: var(--uj-font-ui);
  -webkit-font-smoothing: antialiased;
}

/* Serif display headings — the signature of the redesign */
h1, h2, h3, .display, [class*="title"]:not(input):not(textarea) {
  font-family: var(--uj-font-display);
  letter-spacing: -0.01em;
}
h1 { font-size: 1.45rem; font-weight: 700; }
h2 { font-size: 1.2rem; font-weight: 700; }
h3 { font-size: 1.02rem; font-weight: 600; }

/* Warm subtle page texture on the app canvas */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(180, 83, 9, 0.045), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(28, 25, 23, 0.035), transparent 55%);
}

/* ── buttons ───────────────────────────────────────────────────────────── */
button, .btn, .ns-btn, button.btn-primary, .btn-primary,
.btn-secondary, .btn-warning, .btn-danger, .btn-sm {
  font-family: var(--uj-font-ui);
  border-radius: 11px;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
}
button:active, .btn:active { transform: translateY(1px); }

.btn-primary, button.primary {
  background: linear-gradient(180deg, #2a2522, var(--uj-ink-btn));
  border: 1px solid #000000cc;
  color: #fdfcfa;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 6px 16px rgba(28, 25, 23, 0.22);
}
.btn-primary:hover { background: linear-gradient(180deg, #35302c, #262220); }

.btn, .ns-btn, .btn-secondary, button.secondary {
  background: var(--uj-surface);
  border: 1px solid var(--uj-line);
  color: var(--uj-ink);
  box-shadow: 0 1px 2px rgba(28, 25, 23, 0.04);
}
.btn:hover, .ns-btn:hover, .btn-secondary:hover {
  border-color: #d6cbbd;
  background: var(--uj-panel);
  box-shadow: 0 3px 10px rgba(28, 25, 23, 0.07);
}
.btn-danger, .btn-warning {
  background: #fff;
  border: 1px solid #f2c1bb;
  color: var(--uj-danger);
}
.btn-danger:hover { background: #fef3f2; border-color: #e5a9a1; }

/* ── inputs ────────────────────────────────────────────────────────────── */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="url"], textarea, select {
  font-family: var(--uj-font-ui);
  border-radius: 10px;
  border: 1px solid var(--uj-line);
  background: var(--uj-surface);
  color: var(--uj-ink);
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--uj-accent);
  box-shadow: var(--focus-ring);
}
::placeholder { color: var(--uj-faint); }

/* ── cards & panels ────────────────────────────────────────────────────── */
.card, .modal, .panel, .ns-panel, .content-section, [class*="sidebar"] {
  border-radius: var(--uj-radius);
}
.card, .modal {
  background: var(--uj-surface);
  border: 1px solid var(--uj-line-soft);
  box-shadow: var(--uj-shadow);
}
[class*="sidebar"], .content-section { background: var(--uj-panel); }

/* ── links & tags ──────────────────────────────────────────────────────── */
a { color: var(--uj-accent); }
a:hover { color: var(--uj-accent-hover); }

.tag, .badge, .ns-pill, [class*="pill"] {
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.ns-pill.ok, [class*="pill"].ok, .tag.ok { background: #ecfdf3; color: var(--uj-ok); border-color: #abefc6; }
.ns-pill.off, [class*="pill"].off { background: #fef3f2; color: var(--uj-danger); border-color: #fecdca; }

/* ── tables ────────────────────────────────────────────────────────────── */
table, .ns-table { border-collapse: separate; border-spacing: 0; }
.ns-table thead th, table thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--uj-muted);
  font-weight: 700;
}
.ns-table tbody tr:hover, table tbody tr:hover { background: var(--uj-accent-soft); }

/* ── scrollbars ────────────────────────────────────────────────────────── */
* { scrollbar-width: thin; scrollbar-color: #d6cfc5 transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #d6cfc5; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #bdb3a5; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── focus visibility ──────────────────────────────────────────────────── */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 8px; }

/* ── login page backdrop ───────────────────────────────────────────────── */
body[class*="login"], .login-wrap, .auth-wrap {
  background:
    radial-gradient(900px 480px at 80% -10%, rgba(180, 83, 9, 0.10), transparent 60%),
    radial-gradient(700px 420px at 0% 110%, rgba(28, 25, 23, 0.08), transparent 55%),
    var(--uj-canvas);
}

/* ── editor keeps its serif reading font ───────────────────────────────── */
.ProseMirror, .editor-content, .tiptap {
  font-family: Charter, "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
}

/* ── warm-ink treatment for the dark sidebars (Codex/Chat/Plan/Matrix…) ──
   Those views hardcode a blue-black GitHub palette; re-tint the containers
   to warm ink and switch active states to the UpJacket amber. Child rules
   stay dark-on-dark and remain legible. */
.sidebar, .chat-history-sidebar {
  background: #211d19 !important;
  border-color: #38322b !important;
}
.sidebar-header, .categories-section, .filter-section, .categories-header {
  background: transparent !important;
}
.category-item.active, .entry-item.active, .chat-item.active, .nav-item.active,
[class*="item"].active, [class*="-item"].selected {
  background: rgba(180, 83, 9, 0.16) !important;
  color: #f3b664 !important;
}
.category-item:hover, .entry-item:hover, .chat-item:hover, .nav-item:hover,
[class*="item"]:hover {
  background: rgba(255, 255, 255, 0.045) !important;
}
.btn-new-entry {
  background: linear-gradient(180deg, #2a2522, #1c1917) !important;
  border: 1px solid #000000cc !important;
  color: #fdfcfa !important;
  border-radius: 10px !important;
  font-weight: 600 !important;
}
/* Dark view headers/topbars share the same blue-black; warm them too */
.topbar, .app-header, .views-bar, .header-bar {
  background: #26211d !important;
  border-color: #38322b !important;
}