:root {
  /* Palette */
  --falu-red: #6f1d1bff;
  --eggshell: #f4f1deff;
  --midnight-green: #0e414cff;
  --midnight-green-2: #0f4754ff;
  --lion: #cc9f69ff;
  --caribbean-current: #16697aff;
  --peach: #ffe8afff;

  /* Base tokens (light) */
  --color-bg: var(--eggshell);
  --color-fg: #0b2630;
  --color-primary: var(--caribbean-current);
  --color-primary-2: var(--midnight-green);
  --color-accent: var(--lion);
  --color-danger: var(--falu-red);
}

/* Dark mode */
.dark :root {
  --color-bg: var(--midnight-green-2);
  --color-fg: var(--eggshell);
  --color-primary: var(--peach);
  --color-primary-2: var(--lion);
}

/* Base fonts */
html,
body {
  font-family: "Roboto", system-ui, -apple-system, Segoe UI, Helvetica, Arial,
    "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--color-bg);
  color: var(--color-fg);
}

a,
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Fira Code", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
}

/* Links and accents */
a {
  color: var(--color-primary);
  text-decoration-color: rgba(0, 0, 0, 0.15);
}
a:hover {
  color: var(--color-primary-2);
  text-decoration-color: currentColor;
}
::selection {
  background: rgba(22, 105, 122, 0.2);
}
.dark ::selection {
  background: rgba(255, 232, 175, 0.25);
}

/* Navbar */
.hextra-navbar {
  background: var(--eggshell);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.dark .hextra-navbar {
  background: #0f3840;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* Sidebar */
.hextra-sidebar {
  background: #fff;
}
.dark .hextra-sidebar {
  background: #0f3037;
}
.hextra-sidebar a.active,
.hextra-sidebar .current > a {
  color: var(--color-primary-2);
}
.dark .hextra-sidebar a.active,
.dark .hextra-sidebar .current > a {
  color: var(--color-primary);
}

/* Buttons */
.btn,
button,
.hextra-button {
  background: var(--color-primary);
  color: #fff;
}
.btn:hover,
button:hover,
.hextra-button:hover {
  background: var(--color-primary-2);
}
.btn:focus-visible,
button:focus-visible,
.hextra-button:focus-visible {
  outline: 2px solid rgba(22, 105, 122, 0.35);
  outline-offset: 2px;
}

/* Code blocks */
pre,
code {
  background: rgba(14, 65, 76, 0.06);
}
.dark pre,
.dark code {
  background: rgba(255, 232, 175, 0.08);
}

/* Headings accents */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--midnight-green);
}
.dark h1,
.dark h2,
.dark h3,
.dark h4,
.dark h5,
.dark h6 {
  color: var(--peach);
}

/* Surfaces */
.hextra-container,
.hextra-content .article,
.hextra-blog .post {
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 10px;
}
.dark .hextra-container,
.dark .hextra-content .article,
.dark .hextra-blog .post {
  background: #0e2e36;
  border-color: rgba(255, 255, 255, 0.06);
}

blockquote {
  border-left: 4px solid var(--color-accent);
  background: #f8f9fa;
  padding: 0.75rem 1rem;
}
.dark blockquote {
  background: #0e2a31;
  border-left-color: var(--color-primary);
}