:root {
  /* Colors */
  --page: #f4f7fb;
  --topbar-bg: #ffffff;
  --topbar-fg: #111827;
  --sidebar-bg: #ffffff;
  --sidebar-panel: #f7f9fc;
  --sidebar-fg: #111827;
  --sidebar-muted: #6b7280;
  --card: #ffffff;
  --accent: #244a7f;
  --accent-strong: #1f436f;
  --success: #15803d;
  --accent-green: #d8e0ec;
  --border: #d8e0ec;
  --border-soft: #e7edf5;
  --subnav-line: #d8e0ec;

  /* Layout constants */
  --bar-h: 48px; /* header/footer framed bar height */
  --frame-gap: 0px; /* remove top/bottom frame gap so header/sidebar sit flush */
  --shell-pad: 12px; /* page side padding */
  --grid-gap: 10px; /* horizontal gap between sidebar and content */
  --sidebar-w: 286px; /* sidebar column width */
  --breath: 12px; /* small offset under fixed header for content */

  /* Derived */
  --card-shadow: 0 8px 22px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.04);
}

/* Global/base styles shared across the app */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--page);
  color: #172033;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;

  /* reserve only the top GAP so sidebar aligns with header card */
  padding-top: var(--frame-gap);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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