/* ====================================
   Color System
   - Design tokens (neutrals, links/emphasis)
   - Code token palettes (Prism fallback)
   - Theme and accent palette overrides
   ==================================== */

:root {
  /* Core surfaces and text (light/dark defaults) */
  --bg-color-light: #fafafa;
  --text-color-light: #3a2a1f;
  --bg-color-dark: #1a1a1a;
  --text-color-dark: #f0e6dc;

  /* Legacy link token (not referenced directly) */
  --link-color: #7fb3ff; /* legacy */

  /* Default link/emphasis tokens (overridden by theme/palette below) */
  --link-internal: #7fb3ff;
  --link-external: #7fb3ff;
  --em-color: inherit;
  --bold-color: inherit;

  /* Prism token palette (solid, muted colors) */
  --code-punc-light: #6b635b;
  --code-op-light: #6b635b;
  --code-keyword-light: #a3369f;
  --code-string-light: #2f7d32;
  --code-number-light: #8a5a13;
  --code-func-light: #255dcf;
  --code-comment-light: #8a847d;
  --code-attr-light: #8a5a13;
  --code-tag-light: #b54745;
  --code-prop-light: #8a5a13;

  --code-punc-dark: #c9c2bb;
  --code-op-dark: #c9c2bb;
  --code-keyword-dark: #d16d9e;
  --code-string-dark: #9ecb70;
  --code-number-dark: #d19a66;
  --code-func-dark: #61afef;
  --code-comment-dark: #9aa0a6;
  --code-attr-dark: #e5c07b;
  --code-tag-dark: #e06c75;
  --code-prop-dark: #e5c07b;

  /* Typography tokens */
  --font-body: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-heading: "Inconsolata", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-family: var(--font-body);
}

html { scroll-behavior: auto; }

/* Theme base: maps tokens to concrete light colors */
html.light, [data-theme="light"] {
  background-color: var(--bg-color-light);
  color: var(--text-color-light);
  --em-color: #518adf;
  --bold-color: #518adf;
  --link-internal: #7fb3ff;
  --link-external: #7fb3ff;
}

/* Theme base: maps tokens to concrete dark colors */
html.dark, [data-theme="dark"] {
  background-color: var(--bg-color-dark);
  color: var(--text-color-dark);
  --em-color: #518adf;
  --bold-color: #518adf;
  --link-internal: #7fb3ff;
  --link-external: #7fb3ff;
}

/* Auto apply dark mode if system prefers it */
@media (prefers-color-scheme: dark) {
  :root {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
  }
}

/* Accent palettes (work with both light/dark modes via data-theme + data-palette) */
/* Default palette is indigo to match current design */
[data-theme="light"][data-palette="indigo"],
[data-palette="indigo"][data-theme="light"] {
  --link-internal: #7fb3ff;
  --link-external: #7fb3ff;
  --bold-color: #518adf;
  --em-color: #518adf;
}
[data-theme="dark"][data-palette="indigo"],
[data-palette="indigo"][data-theme="dark"] {
  --link-internal: #7fb3ff;
  --link-external: #7fb3ff;
  --bold-color: #518adf;
  --em-color: #518adf;
}

/* Forest */
[data-theme="light"][data-palette="forest"],
[data-palette="forest"][data-theme="light"] {
  --link-internal: #2e7d32;
  --link-external: #2e7d32;
  --bold-color: #2e7d32;
  --em-color: #2e7d32;
}
[data-theme="dark"][data-palette="forest"],
[data-palette="forest"][data-theme="dark"] {
  --link-internal: #9ecb70;
  --link-external: #9ecb70;
  --bold-color: #9ecb70;
  --em-color: #9ecb70;
}

/* Amber */
[data-theme="light"][data-palette="amber"],
[data-palette="amber"][data-theme="light"] {
  --link-internal: #a36f00;
  --link-external: #a36f00;
  --bold-color: #7a4e00;
  --em-color: #7a4e00;
}
[data-theme="dark"][data-palette="amber"],
[data-palette="amber"][data-theme="dark"] {
  --link-internal: #e5c07b;
  --link-external: #e5c07b;
  --bold-color: #e5c07b;
  --em-color: #e5c07b;
}

/* Rose */
[data-theme="light"][data-palette="rose"],
[data-palette="rose"][data-theme="light"] {
  --link-internal: #b54745;
  --link-external: #b54745;
  --bold-color: #8a2c2a;
  --em-color: #8a2c2a;
}
[data-theme="dark"][data-palette="rose"],
[data-palette="rose"][data-theme="dark"] {
  --link-internal: #e06c75;
  --link-external: #e06c75;
  --bold-color: #dd5b66;
  --em-color: #dd5b66;
}

/* Teal */
[data-theme="light"][data-palette="teal"],
[data-palette="teal"][data-theme="light"] {
  --link-internal: #007a78;
  --link-external: #007a78;
  --bold-color: #025554;
  --em-color: #025554;
}
[data-theme="dark"][data-palette="teal"],
[data-palette="teal"][data-theme="dark"] {
  --link-internal: #64d3c8;
  --link-external: #64d3c8;
  --bold-color: #54938b;
  --em-color: #54938b;
}

/* Purple */
[data-theme="light"][data-palette="purple"],
[data-palette="purple"][data-theme="light"] {
  --link-internal: #7e57c2;
  --link-external: #7e57c2;
  --bold-color: #5e35b1;
  --em-color: #5e35b1;
}
[data-theme="dark"][data-palette="purple"],
[data-palette="purple"][data-theme="dark"] {
  --link-internal: #c792ea;
  --link-external: #c792ea;
  --bold-color: #a373d6;
  --em-color: #a373d6;
}

body {
  max-width: 720px;
  margin: auto;
  padding: 1rem;
  line-height: 1.6;
}

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

/* Internal links */
a[href^="/"],
a[href^="#"],
a:not([href^="http"]):not([href^="https"]):not([href^="mailto:"]):not([href^="tel:"]) {
  color: var(--link-internal);
}
a[href^="/"]:visited,
a[href^="#"]:visited,
a:not([href^="http"]):not([href^="https"]):not([href^="mailto:"]):not([href^="tel:"]):visited {
  color: var(--link-internal);
}

/* External links */
a[href^="http://"],
a[href^="https://"] {
  color: var(--link-external);
}
a[href^="http://"]:visited,
a[href^="https://"]:visited {
  color: var(--link-external);
}

header, footer {
  margin-bottom: 2rem;
}

nav a {
  margin-right: 0.5rem;
}

button#theme-toggle {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 3.2vw, 2.6rem); }
h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); }
h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); }

p, li {
  font-family: var(--font-body);
  font-size: 1rem;
}

/* Emphasis styles: italics match bold color */
em, i {
  color: var(--bold-color);
}

strong, b {
  color: var(--bold-color);
}

/* Inconsolata utilities */
.inconsolata-regular {
  font-family: "Inconsolata", monospace;
  font-weight: 400;
  font-style: normal;
}

.inconsolata-bold {
  font-family: "Inconsolata", monospace;
  font-weight: 700;
  font-style: normal;
}

.inconsolata-italic {
  font-family: "Inconsolata", monospace;
  font-weight: 400;
  font-style: italic;
}

/* Code blocks (Shiki renders pre elements with code inside) */
pre {
  overflow: auto;
  border-radius: 8px;
  padding: 1rem;
  margin: 1rem 0;
  border: 1px solid rgba(127,127,127,0.2);
  tab-size: 2;
  position: relative;
}

/* Keep inline code subtle and readable in both themes */
code:not(pre code) {
  background: rgba(127,127,127,0.12);
  padding: 0.15em 0.35em;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.95em;
}

/* Copy button / language badge */
.code-copy-button {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  line-height: 1;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
  border: 1px solid rgba(127,127,127,0.35);
  background: rgba(127,127,127,0.12);
  color: inherit;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 100ms ease;
}

.code-copy-button:hover { 
  background: rgba(127,127,127,0.18);
  border-color: rgba(127,127,127,0.45);
}

.code-copy-button:active {
  transform: translateY(1px);
}

.code-copy-button.copied {
  background: rgba(120, 200, 120, 0.18);
  border-color: rgba(120, 200, 120, 0.45);
}

/* Optional line wrapping behavior for very long lines in code blocks */
pre code {
  white-space: pre;
}

/* Let Shiki control its own foreground/background via CSS vars */
pre.shiki { background-color: var(--shiki-color-background); color: var(--shiki-color-text); }

/* Prism fallback theme alignment: light/dark */
[data-theme="dark"] pre[class*="language-"],
[data-theme="dark"] code[class*="language-"] {
  text-shadow: none;
}

/* Prism tokens: keep solid colors without background highlighting */
pre[class*="language-"] .token,
code[class*="language-"] .token {
  background: transparent !important;
  text-shadow: none !important;
}

/* Light theme token colors */
[data-theme="light"] pre[class*="language-"] .token.punctuation,
[data-theme="light"] code[class*="language-"] .token.punctuation { color: inherit !important; }
[data-theme="light"] pre[class*="language-"] .token.operator,
[data-theme="light"] code[class*="language-"] .token.operator { color: inherit !important; }
[data-theme="light"] pre[class*="language-"] .token.keyword,
[data-theme="light"] code[class*="language-"] .token.keyword { color: var(--code-keyword-light) !important; }
[data-theme="light"] pre[class*="language-"] .token.string,
[data-theme="light"] code[class*="language-"] .token.string { color: var(--code-string-light) !important; }
[data-theme="light"] pre[class*="language-"] .token.number,
[data-theme="light"] code[class*="language-"] .token.number,
[data-theme="light"] pre[class*="language-"] .token.boolean,
[data-theme="light"] code[class*="language-"] .token.boolean { color: var(--code-number-light) !important; }
[data-theme="light"] pre[class*="language-"] .token.function,
[data-theme="light"] code[class*="language-"] .token.function { color: var(--code-func-light) !important; }
[data-theme="light"] pre[class*="language-"] .token.comment,
[data-theme="light"] code[class*="language-"] .token.comment { color: var(--code-comment-light) !important; font-style: normal !important; }
[data-theme="light"] pre[class*="language-"] .token.attr-name,
[data-theme="light"] code[class*="language-"] .token.attr-name { color: var(--code-attr-light) !important; }
[data-theme="light"] pre[class*="language-"] .token.tag,
[data-theme="light"] code[class*="language-"] .token.tag { color: var(--code-tag-light) !important; }
[data-theme="light"] pre[class*="language-"] .token.property,
[data-theme="light"] code[class*="language-"] .token.property { color: var(--code-prop-light) !important; }

/* Dark theme token colors */
[data-theme="dark"] pre[class*="language-"] .token.punctuation,
[data-theme="dark"] code[class*="language-"] .token.punctuation { color: inherit !important; }
[data-theme="dark"] pre[class*="language-"] .token.operator,
[data-theme="dark"] code[class*="language-"] .token.operator { color: inherit !important; }
[data-theme="dark"] pre[class*="language-"] .token.keyword,
[data-theme="dark"] code[class*="language-"] .token.keyword { color: var(--code-keyword-dark) !important; }
[data-theme="dark"] pre[class*="language-"] .token.string,
[data-theme="dark"] code[class*="language-"] .token.string { color: var(--code-string-dark) !important; }
[data-theme="dark"] pre[class*="language-"] .token.number,
[data-theme="dark"] code[class*="language-"] .token.number,
[data-theme="dark"] pre[class*="language-"] .token.boolean,
[data-theme="dark"] code[class*="language-"] .token.boolean { color: var(--code-number-dark) !important; }
[data-theme="dark"] pre[class*="language-"] .token.function,
[data-theme="dark"] code[class*="language-"] .token.function { color: var(--code-func-dark) !important; }
[data-theme="dark"] pre[class*="language-"] .token.comment,
[data-theme="dark"] code[class*="language-"] .token.comment { color: var(--code-comment-dark) !important; font-style: normal !important; }
[data-theme="dark"] pre[class*="language-"] .token.attr-name,
[data-theme="dark"] code[class*="language-"] .token.attr-name { color: var(--code-attr-dark) !important; }
[data-theme="dark"] pre[class*="language-"] .token.tag,
[data-theme="dark"] code[class*="language-"] .token.tag { color: var(--code-tag-dark) !important; }
[data-theme="dark"] pre[class*="language-"] .token.property,
[data-theme="dark"] code[class*="language-"] .token.property { color: var(--code-prop-dark) !important; }

/* Avoid bold/italic emphasis in tokens */
pre[class*="language-"] .token.bold,
code[class*="language-"] .token.bold { font-weight: 400 !important; }
pre[class*="language-"] .token.italic,
code[class*="language-"] .token.italic { font-style: normal !important; }

/* Post meta (dates) */
.post-meta {
  color: rgba(127,127,127,0.8);
  font-size: 0.95rem;
}

.post-meta p { margin: 0.25rem 0; }

.post-meta-sep {
  border: none;
  border-top: 1px solid rgba(127,127,127,0.3);
  margin: 1.5rem 0 0.75rem 0;
}

/* Blog post list: no bullets, no left padding */
.post-list {
  list-style: none;
  padding-left: 1rem;
  margin: 0.75rem 0 0 0;
}

.post-list li {
  margin: 0.25rem 0;
}

/* Related posts */
.related-posts { margin-top: 2rem; }
.related-posts h2 { font-size: 1rem; opacity: 0.8; margin-bottom: 0.5rem; }
.related-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.25rem; }
.related-list a { text-decoration: underline; }

/* Related table */
.related-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 0 0;
}
.related-table th, .related-table td {
  text-align: left;
  padding: 0.25rem 0.5rem;
  border-top: 1px solid rgba(127,127,127,0.3);
}
.related-table th:first-child, .related-table td:first-child {
  width: 2rem;
}