/* Copied from src/app/theme.css for static serving */

:root {
  --ring-offset: #0d0f17;
}
html:not(.dark) {
  --ring-offset: #ffffff;
}
html:not(.dark) .text-heading-primary {
  color: #0f172a;
}
html:not(.dark) .text-heading-secondary {
  color: #111827;
}
html:not(.dark) .text-body {
  color: #1f2937;
}
html:not(.dark) .text-secondary {
  color: #475569;
}
html:not(.dark) .text-muted {
  color: #64748b;
}
html:not(.dark) .share-panel {
  background-color: rgba(15, 23, 42, 0.04);
  border: 1px solid rgba(15, 23, 42, 0.08);
}
html:not(.dark) .share-input {
  background-color: #fff;
  color: #0f172a;
  border-color: rgba(15, 23, 42, 0.12);
}
html[data-theme] body,
html[data-theme] * {
  transition: background-color 150ms ease, color 150ms ease,
    border-color 150ms ease;
}
/* Warmer, softer light background with subdued noise */
html:not(.dark) .bg-noise {
  /* stacked backgrounds: soft warm overlay + subtle noise */
  background-color: #faf8f5; /* warm off-white */
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.65),
      rgba(255, 255, 255, 0.65)
    ),
    url("/noise.svg");
  background-repeat: repeat;
  background-size: auto, 600px 600px; /* larger tile to soften */
  background-blend-mode: normal, overlay;
}

/* Make section divider visible in light mode */
html:not(.dark) .section-fade {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(15, 23, 42, 0.15) 20%,
    rgba(15, 23, 42, 0.22) 50%,
    rgba(15, 23, 42, 0.15) 80%,
    transparent 100%
  ) !important;
}

/* Generic container surfaces and strokes */
html:not(.dark) .bg-white\/5 {
  background-color: rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .bg-white\/10 {
  background-color: rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) .hover\:bg-white\/20:hover {
  background-color: rgba(15, 23, 42, 0.08) !important;
}
html:not(.dark) .border-white\/10 {
  border-color: rgba(15, 23, 42, 0.1) !important;
}
html:not(.dark) .border-white\/20 {
  border-color: rgba(15, 23, 42, 0.16) !important;
}
html:not(.dark) .ring-white\/5 {
  --tw-ring-color: rgba(15, 23, 42, 0.12) !important;
}
html:not(.dark) .hover\:ring-white\/10:hover {
  --tw-ring-color: rgba(15, 23, 42, 0.18) !important;
}

/* Softer shadows in light mode */
html:not(.dark) .shadow-2xl {
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08),
    0 2px 8px rgba(15, 23, 42, 0.06) !important;
}
html:not(.dark) .shadow-xl {
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.07),
    0 2px 6px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) .shadow-lg {
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.06),
    0 2px 6px rgba(15, 23, 42, 0.05) !important;
}
html:not(.dark) .shadow-md {
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05),
    0 1px 4px rgba(15, 23, 42, 0.04) !important;
}
html:not(.dark) .shadow {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.03) !important;
}

/* Hard-coded dark hex backgrounds -> light neutral */
html:not(.dark) .bg-\[\#1a1b1e\] {
  background-color: #ffffff !important;
}
html:not(.dark) .bg-\[\#101214\] {
  background-color: #ffffff !important;
}
html:not(.dark) .bg-\[\#0d0f17\] {
  background-color: #ffffff !important;
}

/* Inputs (global) for light mode clarity */
html:not(.dark) input[type="text"],
html:not(.dark) input[type="search"],
html:not(.dark) input[type="number"],
html:not(.dark) input[type="email"],
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.12);
  color: #0f172a;
}
html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder {
  color: rgba(15, 23, 42, 0.45);
}

/* Blog forced-white overrides */
html:not(.dark) .blog-content-white,
html:not(.dark) .blog-content-white p,
html:not(.dark) .blog-content-white ul,
html:not(.dark) .blog-content-white ol,
html:not(.dark) .blog-content-white li,
html:not(.dark) .blog-content-white blockquote,
html:not(.dark) .blog-content-white h1,
html:not(.dark) .blog-content-white h2,
html:not(.dark) .blog-content-white h3,
html:not(.dark) .blog-content-white h4,
html:not(.dark) .blog-content-white h5,
html:not(.dark) .blog-content-white h6,
html:not(.dark) .blog-content-white strong,
html:not(.dark) .blog-content-white em,
html:not(.dark) .blog-content-white span {
  color: rgba(15, 23, 42, 0.95) !important;
}
html:not(.dark) .blog-content-white a {
  color: #ff593d !important;
}
html:not(.dark) .blog-content-white a:hover {
  color: #e84e32 !important;
}

/* Ensure typography plugin links use brand in light mode */
html:not(.dark) .prose a {
  color: #ff593d !important;
}
html:not(.dark) .prose a:hover {
  color: #e84e32 !important;
}

/* Heading weight softening in light mode */
html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3,
html:not(.dark) h4 {
  font-weight: 700;
}
html:not(.dark) .font-bold {
  font-weight: 700;
}
html:not(.dark) .font-extrabold {
  font-weight: 800;
}

/* Remove line-height differences to avoid layout shift */

/* Force readable code block text in light mode */
html:not(.dark) pre[class*="language-"],
html:not(.dark) pre[class*="language-"] code {
  color: #e5e7eb !important;
}
/* Ensure Prism labels are visible on light */
html:not(.dark) pre[class*="language-"][data-language]:before {
  color: #cbd5e1 !important;
}
/* Strengthen parameter chip contrast in light mode across the site */
html:not(.dark) code.param-chip {
  background-color: #0f172a !important;
  color: #ffffff !important;
  border: 0 !important;
}

/* Restore Prism token colors inside blog content (both themes) */
.blog-content-white pre[class*="language-"] .token.comment,
.blog-content-white pre[class*="language-"] .token.prolog,
.blog-content-white pre[class*="language-"] .token.doctype,
.blog-content-white pre[class*="language-"] .token.cdata {
  color: #6b7280 !important;
}

.blog-content-white pre[class*="language-"] .token.punctuation {
  color: #94a3b8 !important;
}

.blog-content-white pre[class*="language-"] .token.property,
.blog-content-white pre[class*="language-"] .token.tag,
.blog-content-white pre[class*="language-"] .token.boolean,
.blog-content-white pre[class*="language-"] .token.number,
.blog-content-white pre[class*="language-"] .token.constant,
.blog-content-white pre[class*="language-"] .token.symbol,
.blog-content-white pre[class*="language-"] .token.deleted {
  color: #f87171 !important;
}

.blog-content-white pre[class*="language-"] .token.selector,
.blog-content-white pre[class*="language-"] .token[style*="color: #4ade80"],
.blog-content-white pre[class*="language-"] .token.attr-name,
.blog-content-white pre[class*="language-"] .token.string,
.blog-content-white pre[class*="language-"] .token.char,
.blog-content-white pre[class*="language-"] .token.builtin,
.blog-content-white pre[class*="language-"] .token.inserted {
  color: #4ade80 !important;
}

.blog-content-white pre[class*="language-"] .token.operator,
.blog-content-white pre[class*="language-"] .token.entity,
.blog-content-white pre[class*="language-"] .token.url,
.blog-content-white pre[class*="language-"] .language-css .token.string,
.blog-content-white pre[class*="language-"] .style .token.string {
  color: #60a5fa !important;
}

.blog-content-white pre[class*="language-"] .token.atrule,
.blog-content-white pre[class*="language-"] .token.attr-value,
.blog-content-white pre[class*="language-"] .token.keyword {
  color: #a78bfa !important;
}

.blog-content-white pre[class*="language-"] .token.function,
.blog-content-white pre[class*="language-"] .token.class-name {
  color: #fbbf24 !important;
}

.blog-content-white pre[class*="language-"] .token.regex,
.blog-content-white pre[class*="language-"] .token.important,
.blog-content-white pre[class*="language-"] .token.variable {
  color: #fb7185 !important;
}
/* Override blog forced span color inside highlighted blocks */
html:not(.dark) .blog-content-white pre[class*="language-"] *,
html:not(.dark) .blog-content-white pre[class*="language-"] span {
  color: #e5e7eb !important;
}
/* Inline code in blog content */
html:not(.dark) .blog-content-white :not(pre) > code,
html:not(.dark) .blog-content-white :not(pre) > code span {
  background-color: #0f172a !important;
  color: #ffffff !important;
}

/* Copy button inside code blocks in light mode */
html:not(.dark) .copy-button {
  background: rgba(15, 23, 42, 0.9) !important;
  color: #ffffff !important;
  border-color: rgba(148, 163, 184, 0.25) !important;
}
/* Ensure copy button positions correctly in plain pre blocks */
pre {
  position: relative;
}

/* Map common white text utilities to dark equivalents in light mode */
html:not(.dark) .text-white {
  color: #0f172a !important;
}
html:not(.dark) .text-white\/95 {
  color: rgba(15, 23, 42, 0.95) !important;
}
html:not(.dark) .text-white\/90 {
  color: rgba(15, 23, 42, 0.9) !important;
}
html:not(.dark) .text-white\/80 {
  color: rgba(15, 23, 42, 0.8) !important;
}
/* Exception: keep primary button labels white in light mode */
html:not(.dark) .btn-variant-primary {
  color: #ffffff !important;
}
/* Ensure primary utility button text remains white in light mode */
html:not(.dark) .btn-primary {
  color: #ffffff !important;
}
/* Force white text for converter copy buttons in light mode; out-prioritize utility remaps */
html:not(.dark) button.result-copy-button,
html:not(.dark) .result-copy-button,
html:not(.dark) .result-copy-button * {
  color: #ffffff !important;
}
html:not(.dark) .text-slate-400 {
  color: #475569 !important;
}
html:not(.dark) .text-slate-300 {
  color: #4b5563 !important;
}