frontend/src/style.css

@import "tailwindcss";
@import "highlight.js/styles/github-dark.css";
@plugin "@tailwindcss/typography";

@theme {
  --color-primary-50: #f5fdfd;
  --color-primary-100: #dffaf9;
  --color-primary-200: #b5f0f0;
  --color-primary-300: #80e3e3;
  --color-primary-400: #47d2d2;
  --color-primary-500: #1fc7c7;
  --color-primary-600: #137777;
  --color-primary-700: #106666;
  --color-primary-800: #0e5555;
  --color-primary-900: #0b4444;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-serif: 'Georgia', serif;
}

/* Code block styling in blog posts */
.post-content pre {
  background: #0d1117;
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid #30363d;
}

.post-content pre code {
  background: transparent !important;
  padding: 0 !important;
  font-size: 0.875rem;
  line-height: 1.7;
  font-family: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', Consolas, monospace;
}

.post-content code:not(pre code) {
  background: #f1f5f9;
  color: #e11d48;
  padding: 0.15em 0.4em;
  border-radius: 0.35rem;
  font-size: 0.875em;
  font-family: 'JetBrains Mono', Consolas, monospace;
}

/* Copy button wrapper for code blocks */
.code-block-wrapper {
  position: relative;
}

.code-copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: #30363d;
  color: #8b949e;
  border: none;
  border-radius: 0.4rem;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.code-block-wrapper:hover .code-copy-btn {
  opacity: 1;
}

.code-copy-btn:hover {
  background: #484f58;
  color: #e6edf3;
}

/* ── Layout B — Dark Magazine ────────────────────────────────────────────── */
[data-layout="b"] .lb-page        { background: #0f172a; color: #e2e8f0; min-height: 100vh; }
[data-layout="b"] .lb-nav         { background: #111d35; border-color: #2d3f5f; }
[data-layout="b"] .lb-nav-link    { color: #94a3b8; }
[data-layout="b"] .lb-nav-link:hover { color: #a78bfa; }
[data-layout="b"] .lb-surface     { background: #162236; border: 1px solid #2d3f5f; }
[data-layout="b"] .lb-surface-2   { background: #1c2d44; }
/* LB-ACCENT-START */
[data-layout="b"] .lb-accent      { color: #4ade80; }
[data-layout="b"] .lb-accent-bg   { background: #15803d; }
[data-layout="b"] .lb-accent-bg:hover { background: #166534; }
[data-layout="b"] .lb-muted       { color: #94a3b8; }
[data-layout="b"] .lb-heading     { color: #f1f5f9; }
[data-layout="b"] .lb-card-hover:hover { background: #1c2d44; border-color: #3d5a8a; }
/* LB-ACCENT-END */

/* HOLIDAY-CSS-START */
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } [data-layout="a"] body, [data-layout="a"] #app { background-color: #f5fdfd; } .holiday-badge { box-shadow: 0 0 12px #b5f0f080; } .holiday-badge-b { box-shadow: 0 0 12px #39c0ed40; }
/* HOLIDAY-CSS-END */