@import url("https://fonts.googleapis.com/css2?family=Epilogue:wght@500;700;800;900&family=Noto+Sans:wght@400;500;600;700&display=swap");

/*
  Blueprint theme tokens
  Applied globally with !important to override page-local :root blocks.
*/
:root,
html,
body,
html[data-theme="blueprint"],
body[data-theme="blueprint"],
body.blueprint-theme,
body.prosperity-theme,
body[data-theme="prosperity"] {
  --font-size-base: 16px !important;
  --font-size-small: 14px !important;
  --line-height-base: 1.6 !important;

  /* Core surfaces */
  --bg: #eef3fa !important;
  --bg2: #e4ecf8 !important;
  --paper: #eef3fa !important;
  --paper2: #e4ecf8 !important;
  --surface: #ffffff !important;
  --surface2: #f7faff !important;
  --card: #ffffff !important;

  /* Text */
  --ink: #0b1729 !important;
  --ink2: #0f2d5e !important;
  --text: #0b1729 !important;
  --muted: #435778 !important;
  --muted2: #5b7095 !important;

  /* Brand + accents */
  --accent: #1d4ed8 !important;
  --accent2: #38bdf8 !important;
  --blue: #1d4ed8 !important;
  --blu: #1d4ed8 !important;
  --blue-bg: #eaf1ff !important;
  --blue-border: #c4d6ff !important;
  --sidebar: #0f2d5e !important;

  /* Legacy alias tokens used by pages */
  --gold: #1d4ed8 !important;
  --gold-bg: #eaf1ff !important;
  --gold-border: #c4d6ff !important;
  --green: #166534 !important;
  --green-bg: #e8f5ec !important;
  --green-border: #bfe5cc !important;
  --grn: #166534 !important;
  --amber: #b45309 !important;
  --amber-bg: #fff7ed !important;
  --amber-border: #fed7aa !important;
  --red: #b91c1c !important;
  --red-bg: #fee2e2 !important;
  --purple: #4f46e5 !important;
  --purple-bg: #eef2ff !important;
  --success: #166534 !important;
  --ok: #166534 !important;
  --okbg: #dcfce7 !important;

  /* Structural */
  --border: #d0dcf0 !important;
  --border2: #e2eaf8 !important;
  --line: #d0dcf0 !important;
  --overlay: rgba(11, 23, 41, 0.65) !important;
  --tooltip-bg: #111827 !important;
  --unread-bg: #eff6ff !important;
  --unread-border: #93c5fd !important;
  --step-done: #1d4ed8 !important;
  --step-idle: #cbd5e1 !important;
  --score-great: #166534 !important;
  --score-poor: #b91c1c !important;
  --changed: #0369a1 !important;
  --changed-border: #7dd3fc !important;
  --nri-ink: #0f2d5e !important;
  --nri-bg: #eaf1ff !important;

  /* Layout helper tokens */
  --col-w: 1160px !important;
  --nav-h: 62px !important;
  --safe-bottom: env(safe-area-inset-bottom, 0px) !important;
  --brand-mark-url: none !important;
  --brand-mark-size: 0 !important;
  --brand-mark-overlap: 0 !important;
  --brand-mark-shift-x: 0 !important;
  --brand-mark-shift-y: 0 !important;
}

body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: "Noto Sans", system-ui, sans-serif !important;
  font-size: var(--font-size-base) !important;
  line-height: var(--line-height-base) !important;
}

body::before {
  opacity: 0.18 !important;
}

:is(h1, h2, h3, h4, h5, h6, .logo, .brand, .card-title, .section-title, .hero h1) {
  font-family: "Epilogue", "Noto Sans", system-ui, sans-serif !important;
}

/* Shared logo contract across pages */
:is(.logo, .brand, .footer-logo, .fl, .brand-logo, .sidebar-logo, .nav-logo, .rm-footer-brand) {
  font-family: "Epilogue", "Noto Sans", system-ui, sans-serif !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  letter-spacing: -0.5px !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

:is(.logo, .brand, .brand-logo, .sidebar-logo, .nav-logo) {
  gap: 0 !important;
}

:is(.logo, .brand, .brand-logo, .sidebar-logo, .nav-logo)::before {
  content: none !important;
  display: none !important;
}

:is(.logo, .brand, .footer-logo, .fl, .brand-logo) {
  color: var(--ink) !important;
}

:is(.logo, .brand, .footer-logo, .fl, .brand-logo) span {
  color: var(--accent) !important;
}

:is(.logo, .brand, .footer-logo, .fl, .brand-logo):hover {
  color: var(--ink) !important;
  opacity: 0.92 !important;
}

.sidebar-logo {
  color: #ffffff !important;
}

.sidebar-logo span {
  color: #38bdf8 !important;
}

.nav-logo {
  color: #ffffff !important;
}

.nav-logo span {
  color: #38bdf8 !important;
}

:is(.sidebar-logo, .nav-logo)::before {
  content: none !important;
  display: none !important;
}

/* Sidebar icon visibility hardening */
.nav-icon {
  opacity: 0.96 !important;
}

.nav-icon svg {
  stroke-width: 2.15 !important;
}

.nav-item.active .nav-icon,
.nav-item:hover .nav-icon {
  opacity: 1 !important;
}

.nav-item[href*="new-agreement"] .nav-icon svg path,
.nav-item[href*="agreement-generator"] .nav-icon svg path {
  fill: currentColor !important;
  stroke: none !important;
}

.sidebar .nav-item,
.app-sidebar .nav-item,
[class~="sidebar"] .nav-item {
  color: #9fb3d6 !important;
  background: transparent !important;
}

.sidebar .nav-item:hover,
.sidebar .nav-item.active,
.app-sidebar .nav-item:hover,
.app-sidebar .nav-item.active,
[class~="sidebar"] .nav-item:hover,
[class~="sidebar"] .nav-item.active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

a {
  color: var(--blue);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent2);
}

:is(nav, .topbar) {
  border-bottom-color: var(--border) !important;
}

:is(.btn, .button, .btn-primary, .primary-btn, .pay-btn, .cta-button, .btn-new) {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #ffffff !important;
}

:is(.btn.secondary, .btn-outline, .btn-secondary, .secondary-btn, .btn-light) {
  background: var(--surface2) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}

:is(.status-green, .chip-green) {
  background: var(--green-bg) !important;
  color: var(--green) !important;
}

:is(.status-amber, .chip-amber) {
  background: var(--amber-bg) !important;
  color: var(--amber) !important;
}

:is(.status-red, .chip-red) {
  background: var(--red-bg) !important;
  color: var(--red) !important;
}

:is(
  p,
  li,
  label,
  input,
  select,
  textarea,
  button,
  .muted,
  .field-hint,
  .meta,
  .caption,
  .support-note,
  .status-label,
  small
) {
  line-height: var(--line-height-base) !important;
}

:is(
  input,
  select,
  textarea,
  button
) {
  font-size: var(--font-size-base) !important;
}

:is(
  .muted,
  .field-hint,
  .meta,
  .caption,
  small
) {
  font-size: var(--font-size-small) !important;
  color: var(--muted) !important;
}