/* =====================================================
   EDITORIAL SYSTEM — Arqpedia
   Aplicado em posts (blog) + ferramentas (app)
   Sobrescreve Tailwind tokens do app e style.min.css do blog
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,300..900,0..100,0..1&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root,
[data-theme] {
  /* Paleta Editorial Brasileira */
  --eb-cream: #faf7f2;
  --eb-cream-2: #f2ede5;
  --eb-cream-3: #e8e3da;
  --eb-ink: #1a1814;
  --eb-ink-2: #2f2b25;
  --eb-warm: #5c5651;
  --eb-warm-2: #8b8275;
  --eb-terracota: #c4654e;
  --eb-terracota-2: #a85440;
  --eb-terracota-3: #f5e8e3;
  --eb-line: rgba(26, 24, 20, .08);

  /* Tipografia */
  --eb-serif: 'Fraunces', 'Tiempos Headline', Georgia, serif;
  --eb-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --eb-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* === Override Tailwind tokens do app (oklch → editorial brasileiro) === */
  --background: #faf7f2 !important;
  --foreground: #1a1814 !important;
  --card: #ffffff !important;
  --card-foreground: #1a1814 !important;
  --popover: #ffffff !important;
  --popover-foreground: #1a1814 !important;
  --primary: #c4654e !important;
  --primary-foreground: #faf7f2 !important;
  --secondary: #f2ede5 !important;
  --secondary-foreground: #2f2b25 !important;
  --muted: #f2ede5 !important;
  --muted-foreground: #5c5651 !important;
  --accent: #f5e8e3 !important;
  --accent-foreground: #a85440 !important;
  --destructive: #c83a3a !important;
  --destructive-foreground: #faf7f2 !important;
  --border: #e8e3da !important;
  --input: #e8e3da !important;
  --ring: #c4654e !important;
  --radius: .375rem !important;

  /* Sidebar (do app) */
  --sidebar: #1a1814 !important;
  --sidebar-foreground: #f2ede5 !important;
  --sidebar-primary: #c4654e !important;
  --sidebar-primary-foreground: #faf7f2 !important;
  --sidebar-accent: #2f2b25 !important;
  --sidebar-accent-foreground: #f2ede5 !important;
  --sidebar-border: rgba(255,255,255,.1) !important;
  --sidebar-ring: #c4654e !important;
}

/* ============ Aplicar no body ============ */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  font-family: var(--eb-sans) !important;
  background: var(--eb-cream) !important;
  color: var(--eb-ink) !important;
  letter-spacing: -.011em;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
}

/* ============ Headings editoriais ============ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--eb-serif) !important;
  font-feature-settings: 'ss01';
  font-optical-sizing: auto;
  color: var(--eb-ink) !important;
  letter-spacing: -.022em !important;
  font-weight: 400 !important;
}

h1, .h1 {
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 380 !important;
  line-height: 1 !important;
  letter-spacing: -.035em !important;
}
h2, .h2 {
  font-weight: 400 !important;
  line-height: 1.1 !important;
  letter-spacing: -.025em !important;
}
h3, .h3 { font-weight: 450 !important; line-height: 1.2 !important; }

/* Itálico vira accent terracota (sinatura editorial) */
h1 em, h2 em, h3 em,
h1 i, h2 i, h3 i {
  color: var(--eb-terracota) !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 50;
  font-weight: 300 !important;
}

/* ============ Body text ============ */
p, li, td, th, dd, dt, label, span:not([class*="icon"]):not([class*="badge"]) {
  font-family: var(--eb-sans);
}

a {
  color: var(--eb-ink);
  transition: color .2s;
}
a:hover { color: var(--eb-terracota); }

::selection { background: var(--eb-terracota) !important; color: var(--eb-cream) !important; }

/* ============ Mono para números, código, kbd ============ */
code, pre, kbd, samp, .mono,
[class*="font-mono"] {
  font-family: var(--eb-mono) !important;
}

/* ============ App (Tailwind) — botões e cards ============ */

/* Botões primary do app vão para o ink editorial */
[class*="bg-primary"],
button.bg-primary {
  background-color: var(--eb-ink) !important;
  color: var(--eb-cream) !important;
}
[class*="bg-primary"]:hover,
button.bg-primary:hover {
  background-color: var(--eb-terracota) !important;
}

/* Cards e backgrounds claros */
[class*="bg-background"],
[class*="bg-white"],
[class*="bg-card"] {
  background-color: var(--eb-cream) !important;
}

[class*="bg-muted"],
[class*="bg-secondary"] {
  background-color: var(--eb-cream-2) !important;
}

[class*="text-foreground"],
[class*="text-primary-foreground"]:not(.bg-primary [class*="text-primary-foreground"]) {
  color: var(--eb-ink) !important;
}

[class*="text-muted-foreground"] {
  color: var(--eb-warm) !important;
}

[class*="border-border"],
[class*="border-"]:not([class*="border-primary"]):not([class*="border-destructive"]) {
  border-color: var(--eb-line) !important;
}

/* Inputs */
input, textarea, select {
  font-family: var(--eb-sans) !important;
  font-size: 1rem !important;
}

/* Slate dark backgrounds do app (TopBanner Mobflix etc.) → vira ink */
[class*="from-slate-950"],
[class*="via-slate-900"],
[class*="to-slate-950"],
[class*="bg-slate-950"],
[class*="bg-slate-900"] {
  background-color: var(--eb-ink) !important;
  background-image: none !important;
}

[class*="bg-slate-900"] *,
[class*="bg-slate-950"] *,
[class*="from-slate-950"] *,
[class*="via-slate-900"] * {
  color: var(--eb-cream) !important;
}

/* ============ Topbar Mobflix arqpedia-style ============ */
[role="banner"][aria-label*="Mobflix"] {
  background: var(--eb-ink) !important;
}

/* ============ Posts (blog) ============ */

/* Header do blog */
.mobflix-top-bar {
  background: var(--eb-ink) !important;
}
.mobflix-top-bar a { color: var(--eb-cream-2) !important; }
.mobflix-top-bar a:hover { color: var(--eb-terracota) !important; }
.mobflix-top-bar .em,
.mobflix-top-bar em {
  color: var(--eb-terracota) !important;
  font-family: var(--eb-serif) !important;
  font-style: italic;
}
.mobflix-top-bar .mobflix-cta {
  background: var(--eb-terracota) !important;
  color: var(--eb-cream) !important;
  border-radius: 999px !important;
  font-family: var(--eb-mono) !important;
  font-size: .6875rem !important;
  letter-spacing: .04em !important;
}

.site-header {
  background: rgba(250, 247, 242, .88) !important;
  border-bottom: 1px solid var(--eb-line) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
}

.logo-link {
  font-family: var(--eb-serif) !important;
  font-weight: 500 !important;
  letter-spacing: -.02em;
  font-size: 1.375rem !important;
  color: var(--eb-ink) !important;
}

.main-nav a {
  color: var(--eb-warm) !important;
  font-family: var(--eb-sans) !important;
  letter-spacing: -.01em;
}
.main-nav a:hover { color: var(--eb-ink) !important; }

/* Hero do post */
.post-header h1,
.article-header h1,
article h1 {
  font-family: var(--eb-serif) !important;
  font-variation-settings: 'opsz' 144, 'SOFT' 30;
  font-weight: 380 !important;
  color: var(--eb-ink) !important;
  letter-spacing: -.035em !important;
  line-height: .98 !important;
}

.post-meta,
.article-meta,
.post-card-category {
  font-family: var(--eb-mono) !important;
  text-transform: uppercase;
  font-size: .6875rem !important;
  letter-spacing: .12em !important;
  color: var(--eb-terracota) !important;
}

.author-name { font-family: var(--eb-serif) !important; }
.read-time { color: var(--eb-warm-2) !important; font-family: var(--eb-mono) !important; font-size: .75rem; }

/* Article body */
.article-content {
  font-family: var(--eb-sans) !important;
  font-size: 1.0625rem !important;
  line-height: 1.65 !important;
  color: var(--eb-ink-2) !important;
}
.article-content p {
  margin-bottom: 1.25em;
  letter-spacing: -.005em;
}
.article-content h2 {
  font-size: 1.875rem !important;
  margin-top: 2.5em !important;
  margin-bottom: .5em !important;
}
.article-content h3 {
  font-size: 1.375rem !important;
  margin-top: 2em !important;
  margin-bottom: .4em !important;
}
.article-content a {
  color: var(--eb-terracota) !important;
  border-bottom: 1px solid currentColor;
  text-decoration: none !important;
}
.article-content blockquote {
  border-left: 3px solid var(--eb-terracota) !important;
  font-family: var(--eb-serif) !important;
  font-style: italic;
  font-size: 1.25rem !important;
  color: var(--eb-ink-2) !important;
  padding-left: 1.25em !important;
  margin: 2em 0 !important;
}
.article-content code {
  background: var(--eb-cream-2) !important;
  padding: .12em .35em;
  border-radius: 3px;
  font-size: .9em;
}
.article-content table {
  font-family: var(--eb-sans) !important;
  border-collapse: collapse;
  width: 100%;
  margin: 2em 0;
  font-size: .9375rem;
}
.article-content th,
.article-content td {
  border-bottom: 1px solid var(--eb-line) !important;
  padding: var(--s-3, 12px) var(--s-4, 16px) !important;
  text-align: left;
}
.article-content th {
  font-family: var(--eb-mono) !important;
  font-size: .6875rem !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--eb-warm) !important;
  background: var(--eb-cream-2) !important;
}

/* TOC */
.toc-widget {
  background: var(--eb-cream-2) !important;
  border: 1px solid var(--eb-line) !important;
  border-radius: 8px !important;
}
.toc-widget h3 {
  font-family: var(--eb-mono) !important;
  font-size: .6875rem !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--eb-warm) !important;
}
.toc-widget a {
  font-family: var(--eb-sans) !important;
  font-size: .875rem !important;
  color: var(--eb-warm) !important;
}
.toc-widget a:hover {
  color: var(--eb-terracota) !important;
}

/* FAQ accordion */
.faq-accordion summary,
.faq-item summary {
  font-family: var(--eb-serif) !important;
  font-size: 1.125rem !important;
  font-weight: 400 !important;
  color: var(--eb-ink) !important;
}
.faq-item {
  border-bottom: 1px solid var(--eb-line) !important;
}

/* Cards de post */
.post-card {
  border-radius: 4px !important;
  background: transparent !important;
}
.post-card-image {
  border-radius: 4px !important;
  background: var(--eb-cream-2) !important;
}
.post-card-title,
.post-card-title a {
  font-family: var(--eb-serif) !important;
  font-weight: 400 !important;
  letter-spacing: -.018em !important;
  color: var(--eb-ink) !important;
}
.post-card-category {
  color: var(--eb-terracota) !important;
}

/* Botões */
.btn-primary, button.btn-primary {
  background: var(--eb-ink) !important;
  color: var(--eb-cream) !important;
  border-radius: 999px !important;
  font-family: var(--eb-sans) !important;
  font-weight: 500 !important;
  letter-spacing: -.01em;
  font-size: .9375rem !important;
}
.btn-primary:hover, button.btn-primary:hover {
  background: var(--eb-terracota) !important;
  transform: translateY(-1px);
}

/* AdSense */
.ad-slot {
  background: var(--eb-cream-2) !important;
  border-radius: 4px !important;
  border: 1px solid var(--eb-line);
}

/* Author box */
.author-box {
  background: var(--eb-cream-2) !important;
  border-radius: 4px !important;
  border: 1px solid var(--eb-line) !important;
}
.author-avatar {
  background: var(--eb-terracota) !important;
  color: var(--eb-cream) !important;
  font-family: var(--eb-serif) !important;
}

/* Reading progress bar */
#reading-progress,
.reading-progress {
  background: var(--eb-terracota) !important;
}

/* Footer */
.site-footer {
  background: var(--eb-ink) !important;
  color: var(--eb-cream-3) !important;
}
.footer-col h4 {
  font-family: var(--eb-mono) !important;
  text-transform: uppercase;
  font-size: .6875rem !important;
  letter-spacing: .12em;
  color: var(--eb-cream) !important;
  font-weight: 500 !important;
}
.footer-col a {
  color: var(--eb-cream-3) !important;
  opacity: .7;
}
.footer-col a:hover { opacity: 1; color: var(--eb-terracota) !important; }

/* Cross-link "Ferramentas relacionadas" (injetado em posts) */
.tools-related {
  background: var(--eb-cream-2) !important;
  border: 1px solid var(--eb-line) !important;
  border-radius: 8px;
  padding: 24px;
  margin: 32px 0;
}
.tools-related h3 {
  font-family: var(--eb-serif) !important;
  font-size: 1.25rem !important;
  color: var(--eb-ink) !important;
  margin-bottom: 4px;
}
.tools-related .tr-sub {
  font-family: var(--eb-sans) !important;
  font-size: .875rem;
  color: var(--eb-warm) !important;
}
.tools-related-card {
  background: var(--eb-cream) !important;
  border: 1px solid var(--eb-line) !important;
  border-radius: 4px;
}
.tools-related-card:hover {
  border-color: var(--eb-terracota) !important;
}
.tools-related-card .trc-icon {
  font-family: var(--eb-mono) !important;
  color: var(--eb-terracota) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .625rem;
}
.tools-related-card h4 {
  font-family: var(--eb-serif) !important;
  font-weight: 400 !important;
  color: var(--eb-ink) !important;
}
.tools-related-card p {
  font-family: var(--eb-sans) !important;
  color: var(--eb-warm) !important;
}

/* Mobflix banner sutil */
.mobflix-inline-banner {
  background: linear-gradient(135deg, var(--eb-ink) 0%, var(--eb-terracota-2) 100%) !important;
  color: var(--eb-cream) !important;
  border-radius: 4px !important;
}

/* ============ Tailwind utility overrides (app) ============ */

/* Fonts em qualquer container Tailwind */
.font-sans, [class*="font-sans"] { font-family: var(--eb-sans) !important; }
.font-serif, [class*="font-serif"] { font-family: var(--eb-serif) !important; }
.font-display, [class*="font-display"] { font-family: var(--eb-serif) !important; }

/* Estados de hover terracota */
[class*="hover:bg-primary"]:hover {
  background-color: var(--eb-terracota) !important;
}
[class*="text-primary"] {
  color: var(--eb-terracota) !important;
}

/* Rounded reduced (app usa rounded-2xl que fica plástico) */
[class*="rounded-2xl"] { border-radius: 4px !important; }
[class*="rounded-xl"] { border-radius: 4px !important; }
[class*="rounded-lg"] { border-radius: 4px !important; }
[class*="rounded-md"] { border-radius: 3px !important; }

/* ============ Print-friendly ============ */
@media print {
  body { background: white !important; color: black !important; }
  .topbar, .header, .footer, .ad-slot, .tools-related, .mobflix-inline-banner { display: none !important; }
  a { color: black !important; border-bottom: 0 !important; }
}