/* css styles */

/* Color palette */
:root {
  --cream: #f2e9e4;
  --rose-taupe: #c9ada7;
  --slate: #4a4e69;
  --navy: #22223b;
  --mauve-gray: #9a8c98;
  --text-main: #222222;
  --text-muted: #555555;
  --border-soft: #d8d0cb;
}

/* =========================
   Typography & Spacing
========================= */

/* Base text */
body {
  color: var(--text-main);
  line-height: 1.75;
  font-size: 1.05rem;
  max-width: 900px;
  margin: auto;
}

/* Paragraph spacing */
p {
  margin-bottom: 1.25rem;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  color: var(--navy);
  margin-top: 2.25rem;
  margin-bottom: 1rem;
  line-height: 1.3;
}

/* First heading tighter to top */
h1:first-child {
  margin-top: 0.5rem;
}

/* Section spacing */
section {
  margin-bottom: 2.25rem;
}

/* Lists spacing */
ul, ol {
  margin-bottom: 1.25rem;
  padding-left: 1.5rem;
}

li {
  margin-bottom: 0.4rem;
}

/* =========================
   Links
========================= */

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

a:hover,
a:focus {
  color: var(--navy);
}

/* =========================
   Navbar polish
========================= */

.navbar {
  border-bottom: 1px solid var(--border-soft);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.navbar-title,
.navbar-nav .nav-link {
  color: var(--navy) !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.active {
  color: var(--slate) !important;
}

/* =========================
   Buttons
========================= */

.btn {
  margin-top: 0.5rem;
  margin-right: 0.6rem;
  padding: 0.5rem 0.9rem;
  border-radius: 6px;
}

/* Primary */
.btn-primary {
  background-color: var(--slate);
  border-color: var(--slate);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: var(--navy);
  border-color: var(--navy);
}

/* Secondary */
.btn-secondary {
  background-color: var(--mauve-gray);
  border-color: var(--mauve-gray);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  background-color: var(--slate);
  border-color: var(--slate);
}

/* =========================
   Selection highlight
========================= */

::selection {
  background: var(--rose-taupe);
  color: var(--navy);
}

/* =========================
   Blockquotes
========================= */

blockquote {
  border-left: 4px solid var(--rose-taupe);
  padding-left: 1rem;
  color: var(--text-muted);
  margin: 1.5rem 0;
}

/* =========================
   Code
========================= */

code {
  color: var(--slate);
}

pre {
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: 0.75rem;
  margin: 1.5rem 0;
}

/* =========================
   Tables
========================= */

table {
  border-color: var(--border-soft);
  margin: 1.5rem 0;
}

thead {
  color: var(--navy);
}

/* =========================
   Callouts
========================= */

.callout {
  border-left: 5px solid var(--mauve-gray);
  margin: 1.5rem 0;
}

.callout-note {
  border-left-color: var(--slate);
}

.callout-tip {
  border-left-color: var(--rose-taupe);
}

.callout-important,
.callout-warning {
  border-left-color: var(--navy);
}

/* =========================
   Cards / content boxes
========================= */

.card,
.quarto-grid-item {
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}

/* =========================
   Horizontal rules
========================= */

hr {
  border-color: var(--border-soft);
  margin: 2rem 0;
}

/* =========================
   Optional: soft sections
========================= */

.section-soft {
  background-color: var(--cream);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: 1.25rem;
  margin-bottom: 1.75rem;
}