:root {
  --bg-color: #ffffff;
  --text-color: #000000;
  --link-color: #293c87;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}

/* 🌙 Dark mode overrides */
body.dark-mode {
  --bg-color: #1b1b1d;      /* soft charcoal (less harsh than pure black) */
  --text-color: #e6e6e6;    /* slightly dimmed off-white */
  --link-color: #6cb8ff;    /* calm blue accent */
}

/* Optional: dark mode tweaks for Prism, Mermaid, etc. */
body.dark-mode pre[class*="language-"] {
  background: #1e1e1e;
  color: #eaeaea;
}

/* 🌙 Dark-mode table overrides */
body.dark-mode table {
  color: var(--text-color) !important;
}

body.dark-mode table thead th {
  color: var(--text-color) !important;
}

body.dark-mode table tbody td {
  color: var(--text-color) !important;
}

/* Optional: soften zebra stripes in dark mode */
body.dark-mode table.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(255, 255, 255, 0.05) !important;
}

body.dark-mode table.table-striped tbody tr:nth-of-type(even) {
  background-color: rgba(255, 255, 255, 0.02) !important;
}

p {
  /* font-size: 20px; */
    font-size: large;
}

.ukudla-green {
    background: #3b8b47;
    /* border-radius: 5px; */
}

/* Style all nav links */
.navbar-nav .nav-link {
    color: #f2f2f2;
    padding: 14px 16px;
    font-size: 17px;
    border-radius: 5px;
}

.navbar-nav .nav-link {
    margin-left: 5px;
    /* font-size: 20px; */
    font-size: large;
}

/* Hover effect */
.navbar-nav .nav-link:hover {
    background-color: #efc62c;
    color: #a41c22;
}

/* Active link styling */
.navbar-nav .nav-link.active {
    background-color: #a41c22;
    color: white;
}

a:hover {
    color: #a41c22;
    text-decoration: none;
}

.btn-primary {
    background-color: #293c87;
    border-color: #293c87;
}

.btn-primary:hover {
    background-color: #efc62c;
    border-color: #efc62c;
    color: #a41c22;
}

.btn-primary.active {
    background-color: #a41c22;
    border-color: #a41c22;
    color: white;
}

.btn-primary:focus,
.btn-primary:focus-visible {
    background-color: #293c87;
    border-color: #293c87;
    color: white;
    outline: none;
    box-shadow: none;
}

.back-to-outline {
  font-size: small;
  color: #293c87;
  text-decoration: none;
}

.back-to-outline:hover {
  text-decoration: underline;
  color: #293c87;
}