/*
 * MUMULAB Blog Design System v2.0
 * Shared runtime styles for the blog index and every static post.
 * Token definitions are duplicated in input.css so Tailwind utilities and
 * standalone blog rendering resolve to the same values.
 */

:root {
  --color-brand-primary: 207 53% 38%;

  --color-bg: 0 0% 100%;
  --color-bg-subtle: 60 6% 97%;
  --color-bg-muted: 220 9% 96%;
  --color-border: 220 13% 89%;
  --color-border-muted: 220 9% 91%;
  --color-border-strong: 0 0% 7%;

  --color-text-primary: 0 0% 7%;
  --color-text-secondary: 215 16% 43%;
  --color-text-muted: 215 14% 62%;
  --color-text-inverse: 0 0% 98%;

  --color-after-bg: 138 76% 97%;
  --color-after-border: 141 84% 85%;
  --color-after-text: 142 72% 29%;
  --color-before-bg: 0 86% 97%;
  --color-before-border: 0 93% 88%;
  --color-before-text: 0 72% 51%;
  --color-prompt-bg: 60 6% 97%;
  --color-prompt-border: 0 0% 7%;
  --color-insight-bg: 0 0% 7%;
  --color-insight-text: 210 40% 98%;
  --color-insight-cite: 215 14% 62%;
  --color-step-bg: 0 0% 7%;
  --color-tip-border: 220 9% 91%;

  --font-sans: "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --font-serif: "Merriweather", Georgia, "Times New Roman", serif;
  --font-mono: "JetBrains Mono", "D2Coding", "Courier New", monospace;

  --text-xs: 0.64rem;
  --text-sm: 0.8rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.563rem;
  --text-2xl: 1.953rem;
  --text-3xl: 2.441rem;
  --text-4xl: 3.052rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --duration-fast: 100ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.75rem;
  --radius-full: 9999px;

  color-scheme: light;
}

[data-theme="dark"] {
  --color-bg: 222 47% 8%;
  --color-bg-subtle: 222 47% 11%;
  --color-bg-muted: 222 47% 14%;
  --color-border: 215 27% 20%;
  --color-border-muted: 215 27% 22%;
  --color-border-strong: 210 40% 96%;

  --color-text-primary: 210 40% 96%;
  --color-text-secondary: 215 20% 65%;
  --color-text-muted: 215 16% 45%;
  --color-text-inverse: 0 0% 7%;

  --color-prompt-bg: 222 47% 11%;
  --color-insight-bg: 210 40% 96%;
  --color-insight-text: 0 0% 7%;
  --color-insight-cite: 215 16% 45%;
  --color-step-bg: 210 40% 96%;

  color-scheme: dark;
}

html {
  background: hsl(var(--color-bg));
}

body {
  background: hsl(var(--color-bg)) !important;
  color: hsl(var(--color-text-primary)) !important;
  font-family: var(--font-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html.theme-ready body {
  transition:
    background var(--duration-base) var(--ease-out),
    color var(--duration-base) var(--ease-out);
}

::selection {
  background: hsl(var(--color-brand-primary) / 0.18);
}

:where(a, button, input, textarea, select):focus-visible {
  outline: 3px solid hsl(var(--color-brand-primary) / 0.45);
  outline-offset: 3px;
}

/* Typography */
.font-display,
.prose h1,
.prose h2,
.prose h3,
.prose blockquote {
  font-family: var(--font-serif) !important;
}

.font-sans {
  font-family: var(--font-sans) !important;
}

.font-serif {
  font-family: var(--font-serif) !important;
}

.font-mono,
code,
pre {
  font-family: var(--font-mono) !important;
}

.prose {
  max-width: 70ch !important;
  margin-inline: auto;
  color: hsl(var(--color-text-primary)) !important;
  font-family: var(--font-sans) !important;
  font-size: 1.0625rem;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
}

.prose h1 {
  font-size: clamp(1.75rem, 3vw + 1rem, 2.75rem);
}

.prose h2 {
  color: hsl(var(--color-text-primary)) !important;
  font-size: clamp(1.3rem, 2vw + 0.8rem, 1.75rem) !important;
  line-height: 1.35;
}

.prose h3 {
  color: hsl(var(--color-text-primary)) !important;
  font-size: clamp(1.1rem, 1.5vw + 0.6rem, 1.3rem) !important;
  line-height: 1.45;
}

.prose :where(p, li, strong, em, blockquote) {
  color: inherit;
}

.prose a {
  color: hsl(var(--color-brand-primary)) !important;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.prose hr {
  border-color: hsl(var(--color-border));
}

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

/* Semantic utility migration and v1 compatibility */
.text-brand-primary,
.text-primary {
  color: hsl(var(--color-brand-primary)) !important;
}

.text-text-primary,
.text-text-light,
.text-text-dark {
  color: hsl(var(--color-text-primary)) !important;
}

.text-text-secondary,
.text-subtle-light,
.text-subtle-dark {
  color: hsl(var(--color-text-secondary)) !important;
}

.text-text-muted {
  color: hsl(var(--color-text-muted)) !important;
}

.bg-bg,
.bg-background-light,
.bg-background-dark {
  background-color: hsl(var(--color-bg)) !important;
}

.bg-bg-subtle {
  background-color: hsl(var(--color-bg-subtle)) !important;
}

.bg-bg-muted {
  background-color: hsl(var(--color-bg-muted)) !important;
}

.bg-brand-primary,
.bg-primary {
  background-color: hsl(var(--color-brand-primary)) !important;
}

.border-border,
.border-border-light,
.border-border-dark {
  border-color: hsl(var(--color-border)) !important;
}

.border-border-muted {
  border-color: hsl(var(--color-border-muted)) !important;
}

.border-border-strong {
  border-color: hsl(var(--color-border-strong)) !important;
}

.hover\:text-brand-primary:hover,
.hover\:text-primary:hover,
.group:hover .group-hover\:text-brand-primary,
.group:hover .group-hover\:text-primary {
  color: hsl(var(--color-brand-primary)) !important;
}

.border-brand-primary,
.border-primary {
  border-color: hsl(var(--color-brand-primary)) !important;
}

/* Article components */
.prompt-box {
  margin: var(--space-8) 0;
  padding: var(--space-6) var(--space-8);
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  border-left: 4px solid hsl(var(--color-prompt-border)) !important;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: hsl(var(--color-prompt-bg)) !important;
  color: hsl(var(--color-text-primary)) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.92rem;
  line-height: 1.8;
}

.prompt-box .prompt-label {
  display: block;
  margin-bottom: var(--space-3);
  color: hsl(var(--color-text-secondary)) !important;
  font-family: var(--font-sans) !important;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.before-after {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-8) 0;
}

.ba-card {
  padding: var(--space-5) var(--space-6);
  border-radius: var(--radius-md);
  font-family: var(--font-sans) !important;
  font-size: 0.9rem;
  line-height: 1.7;
  word-break: keep-all;
}

.ba-before {
  border: 1px solid hsl(var(--color-before-border)) !important;
  background: hsl(var(--color-before-bg)) !important;
}

.ba-after {
  border: 1px solid hsl(var(--color-after-border)) !important;
  background: hsl(var(--color-after-bg)) !important;
}

.ba-label {
  display: block;
  margin-bottom: var(--space-2);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ba-before .ba-label {
  color: hsl(var(--color-before-text)) !important;
}

.ba-after .ba-label {
  color: hsl(var(--color-after-text)) !important;
}

.ba-reaction {
  margin-top: var(--space-3);
  color: hsl(var(--color-text-secondary)) !important;
  font-size: 0.8rem;
  font-style: italic;
}

.tips-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
  margin: var(--space-6) 0;
}

.tip-card {
  padding: 18px 20px;
  border: 1px solid hsl(var(--color-tip-border)) !important;
  border-radius: var(--radius-md);
  background: hsl(var(--color-bg)) !important;
}

.tip-card h4 {
  margin-bottom: var(--space-1);
  color: hsl(var(--color-text-primary)) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem;
  font-weight: 700;
}

.tip-card p {
  margin: 0;
  color: hsl(var(--color-text-secondary)) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.85rem;
  line-height: 1.6;
  word-break: keep-all;
}

.insight-box {
  margin: var(--space-10) 0;
  padding: var(--space-8) 36px;
  border-radius: var(--radius-md);
  background: hsl(var(--color-insight-bg)) !important;
  color: hsl(var(--color-insight-text)) !important;
  text-align: center;
}

.insight-box :where(p, strong, em, h3, h4) {
  color: inherit !important;
}

.insight-box blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  color: inherit !important;
  font-family: var(--font-serif) !important;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.7;
}

.insight-box cite {
  display: block;
  margin-top: var(--space-4);
  color: hsl(var(--color-insight-cite)) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem;
  font-style: normal;
}

.step-number {
  display: inline-flex !important;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: var(--space-2);
  border-radius: var(--radius-full);
  background: hsl(var(--color-step-bg)) !important;
  color: hsl(var(--color-text-inverse)) !important;
  font-family: var(--font-sans) !important;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
}

/* Extra component families used by newer guides */
.callout-box,
.checklist-box,
.step-card,
.download-box,
.warning-box {
  color: hsl(var(--color-text-primary));
  font-family: var(--font-sans);
}

.callout-box,
.checklist-box,
.step-card,
.download-box {
  border-color: hsl(var(--color-border-muted)) !important;
  background: hsl(var(--color-bg-subtle)) !important;
}

.warning-box {
  border-color: hsl(38 92% 50% / 0.45) !important;
  background: hsl(48 96% 53% / 0.1) !important;
}

.callout-box :where(p, li),
.checklist-box :where(p, li),
.step-card :where(p, li),
.download-box :where(p, li),
.warning-box :where(p, li) {
  color: hsl(var(--color-text-secondary)) !important;
}

/* Surfaces and separators */
footer,
article,
aside,
header {
  border-color: hsl(var(--color-border));
}

[data-theme="dark"] :where(.bg-white, .bg-gray-50, .bg-gray-100, .bg-gray-200) {
  background-color: hsl(var(--color-bg-subtle)) !important;
}

[data-theme="dark"] :where(.bg-gray-700, .bg-gray-800, .bg-gray-900) {
  background-color: hsl(var(--color-bg-muted)) !important;
}

[data-theme="dark"] :where(.text-gray-500, .text-gray-600, .text-gray-700, .text-gray-800, .text-gray-900) {
  color: hsl(var(--color-text-secondary)) !important;
}

[data-theme="dark"] :where(.border-gray-200, .border-gray-300, .border-gray-700, .border-black) {
  border-color: hsl(var(--color-border)) !important;
}

[data-theme="dark"] .prose {
  color: hsl(var(--color-text-primary)) !important;
}

[data-theme="dark"] .prose :where(h1, h2, h3, h4, strong, th) {
  color: hsl(var(--color-text-primary)) !important;
}

[data-theme="dark"] .prose :where(blockquote, figcaption) {
  color: hsl(var(--color-text-secondary)) !important;
}

#mumulab-post-nav {
  border-color: hsl(var(--color-border-strong)) !important;
  color: hsl(var(--color-text-primary)) !important;
}

#mumulab-post-nav a {
  border-color: hsl(var(--color-border-strong)) !important;
  background: transparent !important;
  color: hsl(var(--color-text-primary)) !important;
}

#mumulab-post-nav a:hover {
  background: hsl(var(--color-border-strong)) !important;
  color: hsl(var(--color-text-inverse)) !important;
}

/* Fixed control avoids rewriting 195 different header variants. */
.mumulab-theme-toggle {
  position: fixed;
  right: max(16px, env(safe-area-inset-right));
  bottom: max(16px, env(safe-area-inset-bottom));
  z-index: 70;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid hsl(var(--color-border));
  border-radius: var(--radius-full);
  background: hsl(var(--color-bg) / 0.94);
  color: hsl(var(--color-text-primary));
  box-shadow: 0 10px 30px hsl(220 30% 5% / 0.16);
  cursor: pointer;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition:
    transform var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out),
    background var(--duration-base) var(--ease-out);
}

.mumulab-theme-toggle:hover {
  border-color: hsl(var(--color-brand-primary));
  transform: translateY(-2px);
}

.mumulab-theme-toggle .material-symbols-outlined {
  font-size: 21px;
}

@media (max-width: 640px) {
  .before-after,
  .tips-grid {
    grid-template-columns: 1fr;
  }

  .prose {
    font-size: 1rem;
    line-height: 1.78;
  }

  .prompt-box,
  .insight-box {
    padding: var(--space-6);
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}