/* ==========================================================================
   dynamic-colors.css
   --------------------------------------------------------------------------
   Safelist manual de utilitarios Tailwind gerados dinamicamente em runtime
   via string concatenation nos accessors de model (ex.:
   "bg-{{ $status_color }}-500/10"). O compilador Tailwind nao consegue
   detectar esses nomes, entao as regras sao definidas aqui a mao para
   garantir que as cores apareçam corretamente sem um rebuild do Vite.

   Cores cobertas: red, yellow, green, blue, orange, purple, teal,
                   gray, slate, zinc
   Variantes: bg-{color}-500/10, text-{color}-400, border-{color}-500/30
   ========================================================================== */

/* RED */
.bg-red-500\/10     { background-color: rgb(239 68 68 / 0.1); }
.text-red-400       { color: rgb(248 113 113); }
.border-red-500\/30 { border-color: rgb(239 68 68 / 0.3); }

/* YELLOW */
.bg-yellow-500\/10     { background-color: rgb(234 179 8 / 0.1); }
.text-yellow-400       { color: rgb(250 204 21); }
.border-yellow-500\/30 { border-color: rgb(234 179 8 / 0.3); }

/* GREEN */
.bg-green-500\/10     { background-color: rgb(34 197 94 / 0.1); }
.text-green-400       { color: rgb(74 222 128); }
.border-green-500\/30 { border-color: rgb(34 197 94 / 0.3); }

/* BLUE */
.bg-blue-500\/10     { background-color: rgb(59 130 246 / 0.1); }
.text-blue-400       { color: rgb(96 165 250); }
.border-blue-500\/30 { border-color: rgb(59 130 246 / 0.3); }

/* ORANGE */
.bg-orange-500\/10     { background-color: rgb(249 115 22 / 0.1); }
.text-orange-400       { color: rgb(251 146 60); }
.border-orange-500\/30 { border-color: rgb(249 115 22 / 0.3); }

/* PURPLE */
.bg-purple-500\/10     { background-color: rgb(168 85 247 / 0.1); }
.text-purple-400       { color: rgb(192 132 252); }
.border-purple-500\/30 { border-color: rgb(168 85 247 / 0.3); }

/* TEAL */
.bg-teal-500\/10     { background-color: rgb(20 184 166 / 0.1); }
.text-teal-400       { color: rgb(45 212 191); }
.border-teal-500\/30 { border-color: rgb(20 184 166 / 0.3); }

/* GRAY */
.bg-gray-500\/10     { background-color: rgb(107 114 128 / 0.1); }
.text-gray-400       { color: rgb(156 163 175); }
.border-gray-500\/30 { border-color: rgb(107 114 128 / 0.3); }

/* SLATE */
.bg-slate-500\/10     { background-color: rgb(100 116 139 / 0.1); }
.text-slate-400       { color: rgb(148 163 184); }
.border-slate-500\/30 { border-color: rgb(100 116 139 / 0.3); }

/* ZINC */
.bg-zinc-500\/10     { background-color: rgb(113 113 122 / 0.1); }
.text-zinc-400       { color: rgb(161 161 170); }
.border-zinc-500\/30 { border-color: rgb(113 113 122 / 0.3); }

/* ==========================================================================
   font-serif  —  usar Playfair Display como fonte serif do design system
   ========================================================================== */
.font-serif {
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, "Times New Roman", serif !important;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   .article-prose  —  tipografia editorial para o corpo de publicacoes
   (substitui o plugin @tailwindcss/typography que nao esta instalado)
   ========================================================================== */
.article-prose {
    color: rgb(209 213 219);
    font-size: 17px;
    line-height: 1.85;
    max-width: none;
}
.article-prose > * + * { margin-top: 1.25em; }

.article-prose h1,
.article-prose h2,
.article-prose h3,
.article-prose h4,
.article-prose h5,
.article-prose h6 {
    color: #fff;
    font-family: "Playfair Display", "Cormorant Garamond", Georgia, serif;
    letter-spacing: -0.01em;
    font-weight: 700;
    line-height: 1.2;
    scroll-margin-top: 110px;
}
.article-prose h2 {
    font-size: 1.85rem;
    margin-top: 2.75rem;
    margin-bottom: 1.15rem;
    padding-bottom: 0.65rem;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.article-prose h3 {
    font-size: 1.5rem;
    margin-top: 2.25rem;
    margin-bottom: 1rem;
}
.article-prose h4 {
    font-size: 1.2rem;
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    color: #e5e7eb;
}

.article-prose p,
.article-prose ul,
.article-prose ol {
    color: rgb(209 213 219);
}
.article-prose p { margin: 1.25em 0; }

.article-prose a {
    color: #d4a827;
    text-decoration: none;
    border-bottom: 1px solid rgba(212,168,39,0.35);
    transition: color .2s, border-color .2s;
}
.article-prose a:hover {
    color: #f0d060;
    border-bottom-color: #f0d060;
}

.article-prose strong { color: #fff; font-weight: 600; }
.article-prose em     { color: #e5e7eb; font-style: italic; }
.article-prose mark   { background: rgba(212,168,39,0.25); color: #fff; padding: 0 .25em; border-radius: 3px; }

.article-prose ul,
.article-prose ol {
    padding-left: 1.5rem;
    margin: 1.25em 0;
}
.article-prose ul { list-style: disc; }
.article-prose ol { list-style: decimal; }
.article-prose li { margin: 0.5em 0; padding-left: 0.25rem; }
.article-prose li::marker { color: #d4a827; }

.article-prose blockquote {
    margin: 1.75em 0;
    padding: 1rem 1.25rem;
    border-left: 4px solid #d4a827;
    background: rgba(212,168,39,0.05);
    color: #e5e7eb;
    border-radius: 0 8px 8px 0;
    font-style: italic;
}
.article-prose blockquote p { margin: 0.5em 0; }
.article-prose blockquote p:first-child { margin-top: 0; }
.article-prose blockquote p:last-child  { margin-bottom: 0; }

.article-prose code {
    color: #f0d060;
    background: rgba(255,255,255,0.06);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    font-size: 0.92em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.article-prose pre {
    margin: 1.5em 0;
    padding: 1.15rem 1.25rem;
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    overflow-x: auto;
    font-size: 0.9rem;
    line-height: 1.7;
}
.article-prose pre code {
    background: transparent;
    padding: 0;
    color: #e5e7eb;
}

.article-prose img {
    max-width: 100%;
    height: auto;
    margin: 1.75em auto;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    display: block;
}
.article-prose figure { margin: 1.75em 0; }
.article-prose figcaption {
    text-align: center;
    font-size: 0.85rem;
    color: rgb(156 163 175);
    margin-top: 0.6rem;
    font-style: italic;
}

.article-prose hr {
    margin: 2.5em auto;
    border: 0;
    height: 1px;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(212,168,39,0.45), transparent);
}

.article-prose table {
    width: 100%;
    margin: 1.75em 0;
    border-collapse: collapse;
    font-size: 0.95rem;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 8px;
    overflow: hidden;
}
.article-prose thead { background: rgba(212,168,39,0.08); }
.article-prose th,
.article-prose td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.article-prose th { color: #fff; font-weight: 600; font-family: "Playfair Display", Georgia, serif; }

/* Drop cap sutil no primeiro parágrafo  */
.article-prose > p:first-of-type::first-letter {
    font-family: "Playfair Display", Georgia, serif;
    font-size: 3.2em;
    font-weight: 700;
    color: #d4a827;
    float: left;
    line-height: 1;
    padding: 0.05em 0.1em 0 0;
    margin-right: 0.05em;
}