:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f9fafb;
  --bg-elevated: #f3f4f6;
  --bg-card: #f9fafb;
  --text-primary: #111827;
  --text-secondary: #6b7280;
  --text-muted: #9ca3af;
  --text-code: #374151;
  --accent-primary: #dc2626;
  --accent-secondary: #ea580c;
  --accent-aqua: #0e7490;        /* Darker teal - passes WCAG AA */
  --accent-green: #16a34a;
  --accent-gold: #b45309;        /* Darker, more saturated gold */
  --accent-purple: #7c3aed;
  --accent-blue: #2563eb;        /* Your blue for pills */
  --accent-orange: #f97316;      /* Bold orange for pills */
  --border-subtle: #e5e7eb;

  --editor-primary: #32302f;
  --editor-text: #d4be98;
  --editor-border: #3c3836;
}

 /* :root { */
 /*      --bg-primary: #1a1a1a; */
 /*      --bg-secondary: #252525; */
 /*      --bg-elevated: #2d2d2d; */
 /*      --bg-card: #232323; */
 /*      --text-primary: #e8dcc8; */
 /*      --text-secondary: #a89984; */
 /*      --text-muted: #6b6b6b; */
 /*      --accent-primary: #ea6962; */
 /*      --accent-secondary: #e78a4e; */
 /*      --accent-aqua: #7daea3; */
 /*      --accent-green: #a9b665; */
 /*      --accent-gold: #d8a657; */
 /*      --accent-purple: #d3869b; */
 /*      --border-subtle: #3a3a3a; */
 /*    } */

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	background: var(--bg-primary);
	color: var(--text-primary);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: 18px;
	line-height: 1.7;
	padding: 3rem 2rem;
	max-width: 800px;
	margin: 0 auto;
}

::selection {
	background: var(--accent-gold);
	color: var(--bg-primary);
}

.blog-post {
	animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.article-header {
	margin-bottom: 3rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--bg-elevated);
}

.article-title {
	font-size: 2.5rem;
	color: var(--text-primary);
	margin-bottom: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
}

.article-meta {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.meta-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.35rem 0.85rem;
	background: var(--bg-elevated);
	border-radius: 20px;
	font-size: 0.85rem;
	color: var(--text-secondary);
	font-weight: 500;
}

.meta-pill.author {
	background: var(--bg-elevated);
	color: var(--text-primary);
}

.meta-pill.date {
	background: var(--bg-secondary);
	color: var(--text-primary);
}

.meta-pill.tag {
	background: var(--accent-aqua);
	color: #ffffff;
}

.meta-pill.status {
	background: var(--accent-blue);
	color: #ffffff;
}

.meta-pill.priority {
	background: var(--accent-orange);
	color: #ffffff;
}

.article-content h2 {
	font-size: 2rem;
	color: var(--text-primary);
	margin: 3rem 0 1.5rem 0;
	font-weight: 700;
}

.article-content h3 {
	font-size: 1.5rem;
	color: var(--text-primary);
	margin: 2.5rem 0 1rem 0;
	font-weight: 600;
}

.article-content p {
	margin: 1.5rem 0;
}

.article-content ul {
	margin: 1.5rem 0;
	padding-left: 2rem;
}

.article-content li {
	margin: 0.75rem 0;
}

a {
	color: var(--accent-aqua);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: all 0.2s ease;
}

a:hover {
	color: var(--accent-green);
	border-bottom-color: var(--accent-green);
}

code {
	font-family: "JetBrains Mono", monospace;
	font-size: 1em;
	background: var(--bg-elevated);
	padding: 2px 6px;
	border-radius: 3px;
	color: var(--accent-aqua);
}

pre {
	background: var(--editor-primary);
	border: 1px solid var(--editor-border);
	border-radius: 6px;
	padding: 1.5rem;
	margin: 2rem 0;
	overflow-x: auto;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

pre code {
	background: none;
	padding: 0;
	font-size: 16px;
	line-height: 1.6;
	color: var(--editor-text); /* Changed from var(--text-primary) */
	display: block;
}

.keyword { color: var(--accent-primary); }
.class-name { color: var(--accent-gold); }
.method { color: var(--accent-green); }
.string { color: var(--accent-aqua); }
.symbol { color: var(--accent-purple); }
.comment { color: var(--text-secondary); font-style: italic; }

.callout {
	margin: 2rem 0;
	padding: 1.5rem;
	border-radius: 6px;
	border: none;
	background: var(--accent-gold);
	color: #ffffff;
}

.callout.tip {
	background: var(--accent-green);
	color: #ffffff;
}

.callout.warning {
	background: var(--accent-orange);
	color: #ffffff;
}

.callout.info {
	background: var(--accent-blue);
	color: #ffffff;
}

.callout.note {
	background: var(--accent-aqua);
	color: #ffffff;
}

.callout strong {
	color: #ffffff;
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 700;
}

.callout em {
	color: #ffffff;
}

.callout code {
	background: rgba(0, 0, 0, 0.2);
	color: #ffffff;
	font-weight: 500;
}


.image-offset {
	position: relative;
	margin: 3rem 1.5rem;
}

.image-offset::before {
	content: '';
	position: absolute;
	top: -12px;
	left: -12px;
	right: 12px;
	bottom: 12px;
	background: var(--accent-gold);
	opacity: 0.15;
	border-radius: 6px;
	z-index: -1;
}

.image-offset img {
	width: 100%;
	border-radius: 6px;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
	display: block;
	background: var(--bg-elevated);
	padding: 1rem;
}

/* Article cards for index/recent posts */
.post-card {
	margin: 2rem 0;
	padding: 1.5rem;
	background: var(--bg-elevated);
	border-radius: 8px;
	border: 1px solid var(--border-subtle);
	transition: all 0.2s ease;
}

.post-card:hover {
	background: var(--bg-secondary);
	border-color: var(--accent-aqua);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.post-card h3 {
	margin-top: 0;
	margin-bottom: 0.75rem;
}

.post-card h3 a {
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 600;
	transition: color 0.2s ease;
}

.post-card h3 a:hover {
	color: var(--accent-aqua);
	border-bottom: none;
}

.post-card-meta {
	color: var(--text-secondary);
	font-size: 0.85rem;
	margin-bottom: 1rem;
	font-weight: 500;
}

.post-card-excerpt {
	margin: 0;
	color: var(--text-secondary);
	line-height: 1.6;
}

.view-all-link {
	display: inline-block;
	margin-top: 2rem;
	color: var(--accent-aqua);
	font-weight: 600;
	text-decoration: none;
	transition: all 0.2s ease;
}

.view-all-link:hover {
	color: var(--accent-blue);
	transform: translateX(4px);
}

/* Resource/Connect links */
.resource-links {
	margin: 2rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.resource-link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1rem 1.25rem;
	background: var(--bg-elevated);
	border: 1px solid var(--border-subtle);
	border-radius: 8px;
	transition: all 0.2s ease;
	text-decoration: none;
	color: var(--text-primary);
}

.resource-link:hover {
	background: var(--bg-secondary);
	border-color: var(--accent-aqua);
	transform: translateX(4px);
}

.resource-link .link-type {
	font-family: "JetBrains Mono", monospace;
	font-size: 0.75rem;
	padding: 0.3rem 0.7rem;
	background: var(--accent-aqua);
	color: #ffffff;
	border-radius: 4px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-weight: 600;
	min-width: 80px;
	text-align: center;
}

.resource-link .link-title {
	flex: 1;
	font-weight: 500;
	color: var(--text-primary);
}

.resource-link .link-arrow {
	color: var(--text-secondary);
	font-size: 1.25rem;
	transition: all 0.2s ease;
}

.resource-link:hover .link-arrow {
	color: var(--accent-aqua);
	transform: translateX(4px);
}

.no-posts-message {
  color: var(--text-secondary);
  font-style: italic;
  margin: 2rem 0;
}

strong {
  color: var(--accent-aqua);  /* Now #b45309 - passes WCAG AA */
  font-weight: 700;
}

em {
  color: var(--accent-purple);  /* Already good */
}

/* Add to your CSS file */
/* Rouge syntax highlighting for Gruvbox Material (matching Neovim) */
/* Rouge syntax highlighting for Gruvbox Material (exact Neovim match) */
.highlight { background: var(--editor-primary); }
.highlight .hll { background-color: #3c3836; }
/* 	--bg-secondary: #32302f; */

/* Comments - grey1 */
.highlight .c { color: #928374; font-style: italic; } /* Comment */
.highlight .cm { color: #928374; font-style: italic; } /* Comment.Multiline */
.highlight .cp { color: #928374; font-style: italic; } /* Comment.Preproc */
.highlight .c1 { color: #928374; font-style: italic; } /* Comment.Single */
.highlight .cs { color: #928374; font-style: italic; } /* Comment.Special */

/* Keywords - red */
.highlight .k { color: #ea6962; } /* Keyword */
.highlight .kc { color: #ea6962; } /* Keyword.Constant */
.highlight .kd { color: #ea6962; } /* Keyword.Declaration */
.highlight .kn { color: #ea6962; } /* Keyword.Namespace */
.highlight .kp { color: #ea6962; } /* Keyword.Pseudo */
.highlight .kr { color: #ea6962; } /* Keyword.Reserved */
.highlight .kt { color: #d8a657; } /* Keyword.Type (yellow) */

/* Operators - orange */
.highlight .o { color: #e78a4e; } /* Operator */
.highlight .ow { color: #ea6962; } /* Operator.Word (red) */

/* Strings - green */
.highlight .s { color: #a9b665; } /* Literal.String */
.highlight .sb { color: #a9b665; } /* Literal.String.Backtick */
.highlight .sc { color: #a9b665; } /* Literal.String.Char */
.highlight .sd { color: #a9b665; } /* Literal.String.Doc */
.highlight .s2 { color: #a9b665; } /* Literal.String.Double */
.highlight .se { color: #e78a4e; } /* Literal.String.Escape (orange) */
.highlight .sh { color: #a9b665; } /* Literal.String.Heredoc */
.highlight .si { color: #e78a4e; } /* Literal.String.Interpol (orange) */
.highlight .sx { color: #a9b665; } /* Literal.String.Other */
.highlight .sr { color: #a9b665; } /* Literal.String.Regex */
.highlight .s1 { color: #a9b665; } /* Literal.String.Single */
.highlight .ss { color: #d3869b; } /* Literal.String.Symbol (purple) */

/* Numbers - purple */
.highlight .m { color: #d3869b; } /* Literal.Number */
.highlight .mf { color: #d3869b; } /* Literal.Number.Float */
.highlight .mh { color: #d3869b; } /* Literal.Number.Hex */
.highlight .mi { color: #d3869b; } /* Literal.Number.Integer */
.highlight .mo { color: #d3869b; } /* Literal.Number.Oct */
.highlight .il { color: #d3869b; } /* Literal.Number.Integer.Long */

/* Names - Classes, Functions, etc */
.highlight .n { color: #d4be98; } /* Name (fg) */
.highlight .na { color: #e78a4e; } /* Name.Attribute (orange) */
.highlight .nb { color: #e78a4e; } /* Name.Builtin (orange) */
.highlight .nc { color: #d8a657; } /* Name.Class (yellow) */
.highlight .no { color: #d3869b; } /* Name.Constant (purple) */
.highlight .nd { color: #e78a4e; } /* Name.Decorator (orange) */
.highlight .ni { color: #d3869b; } /* Name.Entity (purple) */
.highlight .ne { color: #ea6962; } /* Name.Exception (red) */
.highlight .nf { color: #a9b665; } /* Name.Function (green) */
.highlight .nl { color: #d3869b; } /* Name.Label (purple) */
.highlight .nn { color: #d8a657; } /* Name.Namespace (yellow) */
.highlight .nt { color: #ea6962; } /* Name.Tag (red) */
.highlight .nv { color: #7daea3; } /* Name.Variable (aqua) */
.highlight .bp { color: #e78a4e; } /* Name.Builtin.Pseudo (orange) */
.highlight .vc { color: #7daea3; } /* Name.Variable.Class (aqua) */
.highlight .vg { color: #7daea3; } /* Name.Variable.Global (aqua) */
.highlight .vi { color: #7daea3; } /* Name.Variable.Instance (aqua) */

/* Generic / Diff */
.highlight .gd { color: #ea6962; } /* Generic.Deleted (red) */
.highlight .ge { font-style: italic; } /* Generic.Emph */
.highlight .gh { color: #d8a657; font-weight: bold; } /* Generic.Heading (yellow) */
.highlight .gi { color: #a9b665; } /* Generic.Inserted (green) */
.highlight .gp { color: #928374; font-weight: bold; } /* Generic.Prompt (grey) */
.highlight .gs { font-weight: bold; } /* Generic.Strong */
.highlight .gu { color: #d8a657; font-weight: bold; } /* Generic.Subheading (yellow) */

/* Other */
.highlight .err { color: #ea6962; } /* Error (red) */
.highlight .w { color: #d4be98; } /* Text.Whitespace (fg) */

@import "forms";