/* Custom variables for minimalist theme */
:root {
  --bg-color: #ffffff;
  --text-color: #111827; /* Tailwind gray-900 */
  --accent-color: #3b82f6; /* Tailwind blue-500 */
  --border-color: #e5e7eb; /* Tailwind gray-200 */
  --code-bg: #f3f4f6; /* Tailwind gray-100 */
}

html.dark {
  --bg-color: #0f172a; /* Tailwind slate-900 */
  --text-color: #f8fafc; /* Tailwind slate-50 */
  --accent-color: #60a5fa; /* Tailwind blue-400 */
  --border-color: #334155; /* Tailwind slate-700 */
  --code-bg: #1e293b; /* Tailwind slate-800 */
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  transition: background-color 0.2s, color 0.2s;
}

/* Custom code block styling to override Prism and match our aesthetic */
pre[class*="language-"] {
  background: var(--code-bg) !important;
  border-radius: 0.375rem; /* Tailwind rounded-md */
  border: 1px solid var(--border-color);
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
  font-family: 'Fira Code', 'JetBrains Mono', 'Roboto Mono', monospace !important;
  font-size: 0.875rem !important; /* Tailwind text-sm */
  line-height: 1.5;
}

code[class*="language-"], pre[class*="language-"] {
  color: var(--text-color) !important;
  text-shadow: none !important;
}

/* Prism.js syntax token coloring tweaks */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #6b7280; /* gray-500 */
}

html.dark .token.comment,
html.dark .token.prolog,
html.dark .token.doctype,
html.dark .token.cdata {
  color: #94a3b8; /* slate-400 */
}

.token.punctuation {
  color: #9ca3af; /* gray-400 */
}

html.dark .token.punctuation {
  color: #64748b; /* slate-500 */
}

.token.namespace {
  opacity: .7;
}

.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: #ef4444; /* red-500 */
}

html.dark .token.property,
html.dark .token.tag,
html.dark .token.boolean,
html.dark .token.number,
html.dark .token.constant,
html.dark .token.symbol,
html.dark .token.deleted {
  color: #f87171; /* red-400 */
}

.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: #10b981; /* emerald-500 */
}

html.dark .token.selector,
html.dark .token.attr-name,
html.dark .token.string,
html.dark .token.char,
html.dark .token.builtin,
html.dark .token.inserted {
  color: #34d399; /* emerald-400 */
}

.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: #b45309; /* amber-700 */
}

html.dark .token.operator,
html.dark .token.entity,
html.dark .token.url,
html.dark .language-css .token.string,
html.dark .style .token.string {
  color: #fbbf24; /* amber-400 */
}

.token.atrule,
.token.attr-value,
.token.keyword {
  color: #3b82f6; /* blue-500 */
}

html.dark .token.atrule,
html.dark .token.attr-value,
html.dark .token.keyword {
  color: #60a5fa; /* blue-400 */
}

.token.function,
.token.class-name {
  color: #db2777; /* pink-600 */
}

html.dark .token.function,
html.dark .token.class-name {
  color: #f472b6; /* pink-400 */
}

.token.regex,
.token.important,
.token.variable {
  color: #f59e0b; /* amber-500 */
}

html.dark .token.regex,
html.dark .token.important,
html.dark .token.variable {
  color: #fbbf24; /* amber-400 */
}

/* Nav links underline animation */
.nav-link {
  position: relative;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  width: 100%;
  transform: scaleX(0);
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: var(--text-color);
  transform-origin: bottom right;
  transition: transform 0.25s ease-out;
}
.nav-link:hover::after {
  transform: scaleX(1);
  transform-origin: bottom left;
}