/* =========================
   THEME (decorativo)
   - Apenas variáveis + fundos leves
   ========================= */

:root{
  --container: 1180px;
  --radius: 18px;

  /* Cores base */
  --bg: #f6f8fc;
  --text: #0f172a;
  --muted: #475569;

  /* Linhas/sombras */
  --line: rgba(15, 23, 42, .10);
  --line-soft: rgba(15, 23, 42, .06);
  --shadow: 0 10px 25px rgba(2, 8, 23, .06);
  --card-shadow: 0 10px 22px rgba(2, 8, 23, .05);

  /* Acento */
  --accent: #2563eb;
  --accent-soft: rgba(37, 99, 235, .12);
  --accent-border: rgba(37,99,235,.35);

  /* Superfícies */
  --panel-bg: rgba(255,255,255,.85);
  --card-bg: rgba(255,255,255,.92);

  /* Botões */
  --btn-bg: #ffffff;
  --btn-text: var(--text);
  --btn-shadow: 0 6px 16px rgba(2,8,23,.04);
  --btn-primary-text: #ffffff;
  --btn-primary-shadow: 0 12px 22px rgba(37,99,235,.18);

  /* Header/nav */
  --header-bg: rgba(246,248,252,.85);
  --nav-hover-bg: rgba(255,255,255,.75);

  /* Mobile items */
  --mobile-item-bg: rgba(255,255,255,.60);
  --mobile-item-hover: #ffffff;

  /* Pills/placeholders */
  --pill-bg: rgba(255,255,255,.70);
  --placeholder: rgba(15,23,42,.40);

  /* Featured/media */
  --featured-media-bg: linear-gradient(180deg, rgba(37,99,235,.10), rgba(37,99,235,.02));
  --card-media-bg: linear-gradient(180deg, rgba(15,23,42,.04), rgba(15,23,42,.02));
  --cat-media-bg: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.02));
  --cat-top-bg: rgba(15,23,42,.02);

  /* Banner */
  --ad-border: rgba(15,23,42,.18);
  --ad-bg: rgba(255,255,255,.70);

  /* Footer */
  --footer-bg: rgba(255,255,255,.55);
}

/* Fundo “editorial” leve */
body{
  background:
    radial-gradient(900px 420px at 15% 0%, rgba(37,99,235,.10), transparent 60%),
    radial-gradient(900px 420px at 85% 0%, rgba(2,132,199,.08), transparent 55%),
    var(--bg);
}