frontend/src/index.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Lora:ital,wght@0,500;0,600;1,400&display=swap');

@tailwind base;
@tailwind components;
@tailwind utilities;

/* ── BASE ────────────────────────────────────────────────────────── */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html { font-size: 16px; }

  body {
    @apply bg-dark-950 text-slate-100;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  ::-webkit-scrollbar          { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track    { background: transparent; }
  ::-webkit-scrollbar-thumb    { @apply bg-dark-600 rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-gold-700; }

  ::selection {
    @apply bg-gold-700/40 text-gold-100;
  }
}

/* ── CUSTOM PROSE (markdown in chat) ─────────────────────────────── */
@layer components {
  .prose-para {
    @apply text-slate-200 leading-relaxed;
  }
  .prose-para h1 {
    @apply font-serif font-semibold text-gold-300 text-xl mt-4 mb-2 pb-1 border-b border-dark-600;
  }
  .prose-para h2 {
    @apply font-serif font-semibold text-gold-300 text-lg mt-3 mb-1.5;
  }
  .prose-para h3 {
    @apply font-serif font-medium text-slate-200 text-base mt-3 mb-1;
  }
  .prose-para strong {
    @apply font-semibold text-slate-100;
  }
  .prose-para em {
    @apply italic text-slate-300;
  }
  .prose-para code {
    @apply font-mono text-xs bg-navy-900/60 border border-navy-600/40 text-sky-300 rounded px-1.5 py-0.5;
    /* Garantir quebra de linha para código inline */
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
  }
  .prose-para blockquote {
    @apply border-l-2 border-gold-600 bg-gold-950/20 rounded-r-lg px-4 py-2.5 my-3;
    @apply font-serif italic text-gold-200/90 text-sm;
  }
  .prose-para a {
    @apply text-gold-400 underline underline-offset-2 hover:text-gold-300 transition-colors;
  }
  .prose-para hr {
    @apply border-dark-600 my-4;
  }
  .prose-para br {
    @apply leading-relaxed;
  }

  /* Consecutive blockquotes */
  .prose-para blockquote + blockquote {
    @apply mt-1;
  }

  /* ── BLOCOS DE CÓDIGO (para highlight.js ou outros) ────────── */
  /* Aplica a blocos <pre><code> e também a <code> com classes de highlight */
  pre code,
  pre code.hljs,
  code.hljs,
  .hljs {
    white-space: pre-wrap !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100%;
  }
  /* Ajuste adicional para <pre> que envolve o código */
  pre {
    @apply bg-navy-900/80 border border-navy-700 rounded-lg p-3 overflow-x-auto;
  }

  /* ── ESTILO ESPECÍFICO PARA EMENTAS (language-ementa) ────────── */
  pre code.language-ementa {
    display: block;
    position: relative;
    padding-top: 2rem; /* espaço para o label */
    background-color: #1e293b; /* tom navy mais escuro */
    border-left: 4px solid #c9a84c; /* dourado */
    border-radius: 0.5rem;
    font-family: 'Lora', Georgia, serif; /* fonte serifada para contraste */
    font-size: 0.9rem;
    line-height: 1.6;
    color: #e2e8f0;
  }

  /* Pseudo-elemento para o label "EMENTA" */
  pre code.language-ementa::before {
    content: "⚖ EMENTA";
    position: absolute;
    top: 0;
    left: 0;
    background: #c9a84c;
    color: #0f172a;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.75rem;
    border-radius: 0 0 0.5rem 0;
    text-transform: uppercase;
    z-index: 10;
  }
}

/* ── ANIMATIONS ───────────────────────────────────────────────────── */
@layer utilities {
  @keyframes slideUp {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0);     }
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  @keyframes float {
    0%, 100% { transform: translateY(0);    }
    50%       { transform: translateY(-6px); }
  }
  @keyframes blink {
    0%, 100% { opacity: 1;  }
    50%       { opacity: 0;  }
  }
  @keyframes accordion {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0);    }
  }
  @keyframes goldPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
    50%       { box-shadow: 0 0 12px 3px rgba(201,168,76,.25); }
  }
  @keyframes spin {
    to { transform: rotate(360deg); }
  }

  .animate-slideUp  { animation: slideUp 0.35s ease both; }
  .animate-fadeIn   { animation: fadeIn 0.5s ease both; }
  .animate-float    { animation: float 3s ease-in-out infinite; }
  .animate-blink    { animation: blink 1s step-end infinite; }
  .animate-accordion { animation: accordion 0.25s ease both; }
  .animate-goldPulse { animation: goldPulse 2s ease-in-out infinite; }
  .animate-spin-slow { animation: spin 1.5s linear infinite; }
}