/* =================================================================
   Pantanews — Design Tokens (cores + tipografia + espaçamento)
   Importe este arquivo para usar a base visual do Pantanews.
   ================================================================= */

/* Webfonts — both families self-hosted as variable fonts */
@font-face {
  font-family: "Geologica";
  src: url("../fonts/Geologica-VariableFont_CRSV_SHRP_slnt_wght.07365862d460.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inconsolata";
  src: url("../fonts/Inconsolata-VariableFont_wdth_wght.77eb90c35f92.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 50% 200%;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand ─────────────────────────────────────────────────────── */
  --green-700: #00532f;   /* dark — banners, hover */
  --green-600: #00673D;   /* PRIMÁRIA — kickers, tags, hovers */
  --green-500: #0a7a48;   /* mid */
  --green-400: #1ea552;   /* lighter */
  --lime-400:  #36d68a;   /* lime accent — usos pontuais */

  --blue-500:  #3B4BFF;   /* SECUNDÁRIA — cidades, CTA */
  --blue-600:  #2535e6;   /* hover */

  /* ── Light mode (default) ─────────────────────────────────────── */
  --bg: #ffffff;
  --bg-soft: #f6f7f8;
  --bg-elevated: #ffffff;
  --fg: #15171a;          /* corpo */
  --fg-soft: #3b4148;     /* secundário */
  --fg-mute: #6c737b;     /* metadados */
  --fg-faint: #9aa1a8;    /* placeholder */
  --border: #e6e8eb;
  --border-strong: #d3d6da;
  --tag-bg: #eef0f3;
  --tag-fg: #2b2f35;
  --kbd-bg: #f1f3f5;

  --primary: var(--green-600);
  --primary-strong: var(--green-700);
  --primary-fg: #ffffff;
  --secondary: var(--blue-500);
  --secondary-fg: #ffffff;
  --accent: var(--blue-500);
  --accent-fg: #ffffff;

  /* ── Tipografia ───────────────────────────────────────────────── */
  --font-sans: "Geologica", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Inconsolata", "Menlo", "Monaco", "Courier New", monospace;
  --font-mono-stretch: semi-expanded;
  --font-sans-weight: 600;   /* Geologica SemiBold */
  --font-mono-weight: 500;   /* Inconsolata Medium */

  --fs-kicker: 11px;        /* CATEGORIA */
  --fs-meta: 11px;          /* data · tempo */
  --fs-body: 14.5px;        /* corpo da matéria (mono) */
  --fs-dek: 15px;           /* linha fina (mono) */
  --fs-card: 17px;          /* título de card */
  --fs-card-lg: 22px;       /* título grande de seção */
  --fs-h2: 22px;            /* subtítulo da matéria */
  --fs-hero: 30px;          /* manchete hero */
  --fs-article: 44px;       /* título da página de notícia */

  --tracking-kicker: 0.22em;
  --tracking-tight: -0.02em;
  --tracking-snug: -0.01em;

  --lh-tight: 1.15;
  --lh-snug: 1.22;
  --lh-base: 1.55;
  --lh-prose: 1.7;

  /* ── Espaçamento, raios, sombras ──────────────────────────────── */
  --container: 1280px;
  --gap-xs: 8px;
  --gap-sm: 12px;
  --gap-md: 22px;
  --gap-lg: 32px;
  --gap-xl: 56px;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-pill: 999px;

  --shadow-overlay: 0 20px 60px rgba(0, 0, 0, 0.25);
  --shadow-card: 0 1px 2px rgba(20, 25, 33, 0.04);

  /* ── Transições ──────────────────────────────────────────────── */
  --t-fast: 0.15s ease;
  --t-base: 0.2s ease;
  --t-slow: 0.4s ease;

  /* ── Linha de topo (gradiente único do projeto) ──────────────── */
  --top-line: linear-gradient(90deg, var(--green-500), var(--blue-500));
}

[data-theme="dark"] {
  --bg: #0d0f12;
  --bg-soft: #15181c;
  --bg-elevated: #15181c;
  --fg: #f1f3f5;
  --fg-soft: #c8cdd2;
  --fg-mute: #8a9098;
  --fg-faint: #5d6369;
  --border: #23272d;
  --border-strong: #2e333a;
  --tag-bg: #1d2126;
  --tag-fg: #c8cdd2;
  --kbd-bg: #1d2126;
  --primary: var(--green-500);
  --primary-strong: var(--green-600);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* =================================================================
   Reset semântico mínimo + estilos de base
   ================================================================= */
html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
}

/* Manchete principal */
.kicker, .pn-kicker {
  font-size: var(--fs-kicker);
  letter-spacing: var(--tracking-kicker);
  font-weight: 700;
  color: var(--primary);
  text-transform: uppercase;
  font-family: var(--font-sans);
}

.headline, .pn-h1 {
  font-family: var(--font-sans);
  font-size: var(--fs-hero);
  font-weight: 800;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  color: var(--fg);
  margin: 0;
}

.dek, .pn-dek {
  font-family: var(--font-mono);
  font-size: var(--fs-dek);
  color: var(--fg-soft);
  line-height: var(--lh-base);
}

.meta, .pn-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  color: var(--fg-mute);
}

.prose, .pn-prose {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-prose);
  text-align: justify;
}

/* Chip / tag padrão */
.tag, .pn-tag {
  display: inline-flex;
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 3px 8px;
  background: var(--tag-bg);
  color: var(--tag-fg);
  border-radius: 3px;
}

/* Botão azul de CTA */
.btn-cta, .pn-btn-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--accent-fg);
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  font-size: 13.5px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: background var(--t-fast);
}
.btn-cta:hover, .pn-btn-cta:hover { background: var(--blue-600); }

/* Banner de anúncio verde */
.ad-promo, .pn-ad-promo {
  background: var(--green-700);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 26px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: center;
  transition: background var(--t-fast);
  cursor: pointer;
}
.ad-promo:hover, .pn-ad-promo:hover { background: var(--green-600); }
.ad-promo .title { font-size: 19px; font-weight: 700; }
.ad-promo .sub { font-size: 13.5px; opacity: 0.92; }