:root {
  --color-gray: #888;
  --color-grayer: #666;

  --font-title:
    "Inter", "Fira Sans", "Lato", system-ui, -apple-system,
    BlinkMacSystemFont, "Avenir Next", "Avenir", "Segoe UI", "Helvetica Neue",
    Helvetica, Ubuntu, Roboto, Noto, Cantarell, Arial, sans-serif;
  --font-body:
    "Crimson Pro", "Vollkorn", "Alegreya", "Iowan Old Style",
    "Apple Garamond", "Baskerville", "Times New Roman", "Noto Serif",
    "Droid Serif", "Times", "Source Serif Pro", serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-code:
    "Fira Code", "PT Mono", "IBM Plex Mono", Menlo, Consolas, Monaco,
    "Liberation Mono", "Ubuntu Mono", "Lucida Console", monospace;

  /* Color palette */
  --color-light-bg: #fffcf0;
  --color-light-text: #444;
  --color-light-heading: #222;
  --color-light-link: #3273dc;
  --color-light-border: #ddd;
  --color-light-code-bg: #f5f5f5;
  --color-light-code-text: #1a1a1a;

  --color-dark-bg: #19150f;
  --color-dark-text: #dddddd;
  --color-dark-heading: #eeeeee;
  --color-dark-link: #ff5e6c;
  --color-dark-border: #444;
  --color-dark-code-bg: #1a1a1a;
  --color-dark-code-text: #e8e8e8;

  /* Default to light theme */
  --bg-color: var(--color-light-bg);
  --text-color: var(--color-light-text);
  --heading-color: var(--color-light-heading);
  --link-color: var(--color-light-link);
  --border-color: var(--color-light-border);
  --code-bg: var(--color-light-code-bg);
  --code-text-color: var(--color-light-code-text);
}

/* Dark theme overrides with attribute selector */
html[data-theme="dark"] {
  --bg-color: var(--color-dark-bg);
  --text-color: var(--color-dark-text);
  --heading-color: var(--color-dark-heading);
  --link-color: var(--color-dark-link);
  --border-color: var(--color-dark-border);
  --code-bg: var(--color-dark-code-bg);
  --code-text-color: var(--color-dark-code-text);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --bg-color: var(--color-dark-bg);
    --text-color: var(--color-dark-text);
    --heading-color: var(--color-dark-heading);
    --link-color: var(--color-dark-link);
    --border-color: var(--color-dark-border);
    --code-bg: var(--color-dark-code-bg);
    --code-text-color: var(--color-dark-code-text);
  }
}

body {
  font-family: var(--font-body);
  font-size: 21px;
  line-height: 1.5;
  color: var(--text-color);
  max-width: 840px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--bg-color);
  word-wrap: break-word;
  overflow-wrap: break-word;
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, strong, b {
  color: var(--heading-color);
  line-height: 1.2;
  font-family: var(--font-title);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5, h6 { font-size: 1.25rem; }

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

code {
  padding: 3px 6px;
  background-color: var(--code-bg);
  font-family: var(--font-code);
  color: var(--code-text-color);
}

img {
  max-width: 100%;
  height: auto;
}

content img {
  display: block;
  margin: 1rem auto;
}

.old-entry-warning {
  border-left: 5px solid #ff8a34;
  background-color: orange;
  padding: 1rem 1.15rem;
  margin: 1.75rem 0;
  font-size: 1em;
  border-radius: 6px;
  font-weight: 500;
  color: #222;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
}

html[data-theme="dark"] .old-entry-warning {
  background-color: #cc6600;
  border-left-color: #ff8a34;
  color: #fff8f0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .old-entry-warning {
    background-color: #cc6600;
    border-left-color: #ff8a34;
    color: #fff8f0;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
  }
}

.dt-published {
  color: var(--color-gray);
  font-size: 0.95em;
  margin-right: 0.5em;
}

html[data-theme="dark"] .dt-published {
  color: #999;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .dt-published {
    color: #999;
  }
}

@media (max-width: 600px) {
  body {
    padding: 15px;
  }

  h3 {
    font-size: 1.5rem;
  }
}