/* Theme tokens and global base.
   Variables, palette, Bootstrap token mapping and document-level defaults live here. */
:root {
  --primary: #0f766e;
  --primary-dark: #0b5e57;
  --accent: #14b8a6;
  --muted: #64748b;
  --card-bg: #ffffff;
  --glass: rgba(248, 251, 253, 0.78);
  --surface: #f2f7f6;
  --surface-soft: #e6f2ef;
  --border: #cfe0dc;
  --text: #0f172a;
  --surface-raised: #ffffff;
  --control-bg: #ffffff;
  --control-border: #cfe0dc;
  --table-header-bg: #e6f2ef;
  --table-row-hover: #f2f7f6;
  --note-pinned-bg: linear-gradient(180deg, #fffdf4 0%, #f7f4e7 100%);
  --note-pinned-bg-hover: linear-gradient(180deg, #fff9ea 0%, #f6efd8 100%);
  --note-pinned-border: #ead9a8;
  --note-pinned-badge-bg: rgba(180, 124, 22, 0.12);
  --note-pinned-badge-color: #9a6700;
  --note-favorite-bg: linear-gradient(180deg, #f4fcf6 0%, #ecf8f0 100%);
  --note-favorite-bg-hover: linear-gradient(180deg, #effaf2 0%, #e4f4ea 100%);
  --note-favorite-border: #bcdcc7;
  --note-favorite-badge-bg: rgba(47, 133, 90, 0.12);
  --note-favorite-badge-color: #2f855a;
  --nav-height: 44px;
  --actions-height: 34px;
  --title-height: 40px;
  --bs-primary: var(--primary);
  --bs-primary-rgb: 15, 118, 110;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--primary-dark);
  --bs-focus-ring-color: rgba(15, 118, 110, 0.22);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
}

:root.dark {
  --primary: #22c1b6;
  --primary-dark: #14b8a6;
  --accent: #5eead4;
  --muted: #9fb0c7;
  --card-bg: #0f1720;
  --glass: rgba(17, 24, 39, 0.64);
  --surface: #0b1220;
  --surface-soft: #10201f;
  --border: #21413d;
  --text: #e5edf8;
  --surface-raised: #111b2b;
  --control-bg: #121f31;
  --control-border: #314a64;
  --table-header-bg: #17283b;
  --table-row-hover: #1a2a3f;
  --note-pinned-bg: linear-gradient(180deg, rgba(88, 66, 21, 0.44) 0%, rgba(60, 47, 19, 0.52) 100%);
  --note-pinned-bg-hover: linear-gradient(180deg, rgba(100, 74, 24, 0.5) 0%, rgba(72, 54, 22, 0.58) 100%);
  --note-pinned-border: #8e7333;
  --note-pinned-badge-bg: rgba(255, 212, 110, 0.14);
  --note-pinned-badge-color: #f0c76a;
  --note-favorite-bg: linear-gradient(180deg, rgba(27, 94, 55, 0.24) 0%, rgba(20, 74, 44, 0.3) 100%);
  --note-favorite-bg-hover: linear-gradient(180deg, rgba(33, 110, 64, 0.3) 0%, rgba(24, 87, 50, 0.36) 100%);
  --note-favorite-border: #417954;
  --note-favorite-badge-bg: rgba(101, 214, 140, 0.14);
  --note-favorite-badge-color: #8fe0ab;
  --bs-primary: var(--primary);
  --bs-primary-rgb: 34, 193, 182;
  --bs-link-color: var(--primary);
  --bs-link-hover-color: var(--accent);
  --bs-focus-ring-color: rgba(34, 193, 182, 0.28);
  --bs-pagination-active-bg: var(--primary);
  --bs-pagination-active-border-color: var(--primary);
  background-color: #070d17;
  color-scheme: dark;
}

:root:not(.dark) { color-scheme: light; }

html,
body {
  height: 100%;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  color: var(--text);
  background-color: var(--surface);
}

body:not(.no-global-scroll) {
  background: radial-gradient(1200px 500px at 10% -10%, #dff5f2 0%, transparent 65%),
    radial-gradient(900px 380px at 110% 0%, #d8f3ee 0%, transparent 60%),
    linear-gradient(180deg, #f2f7f6 0%, #e6f2ef 100%);
}

body.no-global-scroll,
body.embedded-editor-host,
html:has(body.no-global-scroll),
html:has(body.embedded-editor-host) {
  background: white !important;
  background-image: none !important;
  overscroll-behavior: none;
}

/* Ensure navbar is solid white in editor mode */
body.no-global-scroll .navbar {
  background: white !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border-bottom: 1px solid #f1f5f9;
}

body.no-global-scroll main {
  height: calc(100dvh - var(--header-offset, var(--nav-height)));
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-top: 0 !important;
  /* Remove gaps */
}

body.no-global-scroll main>.container-fluid {
  height: 100%;
  min-height: 0;
  overflow: hidden;
  padding-bottom: 0;
}

:root.dark html,
:root.dark body,
.dark html,
.dark body {
  color: #e6eef8;
  background: radial-gradient(1000px 420px at 0% -20%, #10353b 0%, transparent 55%),
    radial-gradient(1000px 420px at 100% -10%, #134e4a 0%, transparent 55%),
    linear-gradient(180deg, #0a1220 0%, #091624 100%);
}