/* =========================================================================
   iPiauí Design System — Colors & Type
   Portal de notícias do Piauí · "Dá gosto de ver"
   ========================================================================= */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-UltraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak";
  src: url("/fonts/neueplak/NeuePlak-ExtraBlack.ttf") format("truetype");
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Neue Plak Text";
  src: url("/fonts/neueplak/NeuePlakText-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Semibold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pogonia";
  src: url("/fonts/neueplak/Pogonia-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Brand colors ---------- *
   * The logo runs from a sunny orange (i) → coral (p) → deep red (a, u, í)
   * with a yellow/gold accent stroke around the Piauí silhouette.        */

  --brand-orange:        #F7A11A;  /* Sunny orange — the "i" */
  --brand-orange-light:  #FFC25C;
  --brand-orange-dark:   #E8870E;

  --brand-coral:         #F25C29;  /* Mid coral — transition tone */
  --brand-coral-dark:    #D9461C;

  --brand-red:           #E11A1A;  /* PRIMARY brand red — main CTA, highlights */
  --brand-red-dark:      #B81212;
  --brand-red-deep:      #8C0A0A;

  --brand-yellow:        #FFCC2E;  /* Accent stroke / highlight */
  --brand-yellow-dark:   #F2B500;

  /* Signature gradient used in logo + hero accents */
  --brand-gradient: linear-gradient(95deg, #F7A11A 0%, #F25C29 38%, #E11A1A 75%, #B81212 100%);
  --brand-gradient-soft: linear-gradient(95deg, #FFC25C 0%, #F25C29 50%, #E11A1A 100%);

  /* ---------- Neutrals ---------- *
   * Warm browns — NO black. The deepest tone is a warm coffee brown,
   * never #000. Pairs naturally with the warm primaries and avoids the
   * cold/corporate feel of a true black.                                 */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FBF6F0;   /* Warm paper */
  --neutral-100:  #F4ECE0;
  --neutral-200:  #E7DBC8;
  --neutral-300:  #CFBEA4;
  --neutral-400:  #9E8A6F;
  --neutral-500:  #6E5C46;
  --neutral-600:  #4A3A28;
  --neutral-700:  #3A2A1A;   /* Body copy default — deep warm brown */
  --neutral-800:  #2A1C10;
  --neutral-900:  #1F1308;   /* Darkest tone — espresso brown, NOT black */

  /* Replacement for what would have been pure black */
  --ink:          #4A1A0F;   /* Burnt-red ink — use for inverse surfaces */
  --ink-deep:     #2E0F08;

  /* ---------- Semantic foreground / background ---------- */
  --fg-1:        var(--neutral-900);     /* Headlines */
  --fg-2:        var(--neutral-700);     /* Body */
  --fg-3:        var(--neutral-500);     /* Meta, timestamps, captions */
  --fg-4:        var(--neutral-400);     /* Disabled, placeholder */
  --fg-on-brand: var(--neutral-0);

  --bg-0:        var(--neutral-0);       /* Cards / surfaces */
  --bg-1:        var(--neutral-0);       /* Site background: white */
  --bg-2:        var(--neutral-100);     /* Beige band: ULTIMAS */
  --bg-feature-overlay: #E9E5DC;         /* Approved hero overlay card */
  --bg-3:        var(--neutral-200);     /* Stronger panel / hover */
  --bg-inverse:  var(--ink);             /* Footer / dark surfaces — burnt red, NEVER black */
  --bg-inverse-deep: var(--ink-deep);

  --border-soft:    var(--neutral-200);
  --border-default: var(--neutral-300);
  --border-strong:  var(--neutral-400);

  /* ---------- Editorial / category accents ---------- *
   * Vibrant, warm-leaning palette for the new iPiauí portal. Saturated and
   * lively, never black or near-black. Each editoria gets a distinct hue. */
  /* Updated to match the official new-site preview */
  --cat-politica:       #1F7AD4;   /* blue */
  --cat-policia:        #E11A1A;   /* red */
  --cat-esporte:        #2E9B3F;   /* green */
  --cat-entretenimento: #6B3A8C;   /* purple */
  --cat-cidades:        #E85A1F;   /* orange-red */
  --cat-geral:          #F2A30F;   /* amber-orange */
  --cat-ultimas:        #E11A1A;   /* red — for ÚLTIMAS ticker */

  /* ---------- Status ---------- */
  --status-live:    #E11A1A;  /* "AO VIVO" pulse */
  --status-success: #1E6B3A;
  --status-warning: #F2B500;
  --status-danger:  #B81212;
  --status-info:    #0E5BB8;

  /* ---------- Type ---------- */
  --font-sans:    "Neue Plak", "Neue Plak Text", "Helvetica Neue", Arial, sans-serif;
  --font-display: "Neue Plak", "Helvetica Neue", Arial, sans-serif;
  --font-brand-alt: "Pogonia", "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Modular scale — news headlines need range */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   30px;
  --fs-3xl:   38px;
  --fs-4xl:   48px;
  --fs-5xl:   60px;
  --fs-6xl:   76px;
  --fs-7xl:   96px;

  --lh-tight:   1.05;
  --lh-snug:    1.2;
  --lh-normal:  1.45;
  --lh-relaxed: 1.6;

  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.06em;
  --tracking-caps:   0.1em;     /* For ALL-CAPS section labels */

  /* ---------- Spacing ---------- */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;

  /* ---------- Radius ---------- *
   * Large news portals tend to favor rectilinear cards.
   * Small radius for buttons/tags; 0 for editorial cards.                */
  --r-0:    0;
  --r-sm:   2px;
  --r-md:   4px;
  --r-lg:   8px;
  --r-xl:   12px;
  --r-pill: 999px;

  /* ---------- Shadows ---------- */
  --shadow-xs:  0 1px 2px rgba(28, 26, 22, 0.04);
  --shadow-sm:  0 2px 4px rgba(28, 26, 22, 0.06), 0 1px 2px rgba(28, 26, 22, 0.04);
  --shadow-md:  0 6px 14px rgba(28, 26, 22, 0.08), 0 2px 4px rgba(28, 26, 22, 0.05);
  --shadow-lg:  0 16px 32px rgba(28, 26, 22, 0.10), 0 4px 8px rgba(28, 26, 22, 0.06);
  --shadow-brand: 0 8px 24px rgba(225, 26, 26, 0.25);

  /* ---------- Layout ---------- */
  --container-narrow: 720px;
  --container:        1220px;
  --container-wide:   1220px;
  --header-h:         64px;
  --header-h-with-nav:104px;
}

/* ============================================================
   Semantic typography roles
   ============================================================ */

.h-display, h1.display {
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, var(--fs-6xl));
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h-headline, h1 {
  font-family: var(--font-display);
  font-size: clamp(28px, 4vw, var(--fs-4xl));
  font-weight: 900;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h-title, h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 900;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg-1);
}

.h-subtitle, h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: 700;
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h-card, h4 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg-1);
}

.lead {
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
}

.body-sm {
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.meta, .caption {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--fg-3);
}

/* ALL-CAPS section/category label — a hallmark of news portals */
.eyebrow, .category-label {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 900;
  line-height: 1;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--brand-red);
}

/* "AO VIVO" / breaking news flag */
.live-flag {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: 900;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--neutral-0);
  background: var(--brand-red);
  padding: 4px 8px;
  border-radius: var(--r-sm);
}

/* ============================================================
   CANONICAL TYPE ROLES — exported from the iPiauí simulator
   These are the AUTHORITATIVE specs. Always prefer these over
   the generic .h-* helpers above when building portal UI.
   ============================================================ */

/* ---- POST-ÚLTIMAS FEATURE CARD (hero overlay) ---- */
.hero-title {
  font-family: var(--font-sans);
  font-weight: 900;          /* Black */
  font-size: 32px;
  letter-spacing: -0.035em;
  line-height: 1.02;
  color: #000000;
}
.hero-chapeu {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 11px;
  letter-spacing: 0.28em;
  line-height: 1;
  color: #111111;
  text-transform: uppercase;
}
.hero-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15.5px;
  line-height: 1.45;
  color: #111827;
}

/* ---- DESTAQUE PRINCIPAL (secondary feature, e.g. Governador anuncia…) ---- */
#dd-main-title {
  font-family: var(--font-sans);
  font-weight: 900;          /* Black */
  font-size: 41px;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: #2B5CF6;
}
#dd-main-chapeu,
.main-chapeu {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 15px;
  letter-spacing: 0.085em;
  line-height: 1.15;
  color: #64646a;
  text-transform: uppercase;
}
#dd-main-resumo {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.36;
  color: #16283F;
}
/* ---- DESTAQUE CARDS (right rail thumb cards) ---- */
.dd-card-title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 24px;
  letter-spacing: -0.025em;
  line-height: 1.08;
}
.dd-card .chapeu,
.side-chapeu {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.085em;
  line-height: 1.15;
  color: #9BA1AD;
  text-transform: uppercase;
}
/* ---- "MAIS NOTÍCIAS" SECTION header + items ---- */
#mn-head {
  font-family: var(--font-sans);
  font-weight: 900;          /* Black */
  font-size: 27.5px;
  letter-spacing: 0.120em;
  line-height: 1.10;
  color: #3d3d3d;
  text-transform: uppercase;
}
.mn-item-title {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.20;
}
.mn-item-chapeu {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: 0.075em;
  line-height: 1.20;
  color: #9BA1AD;
  text-transform: uppercase;
}
.mn-item-subtitle,
.card-subtitle {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 15.5px;
  letter-spacing: 0;
  line-height: 1.38;
  color: #16283F;
}

/* ---- EDITORIAL NAV (POLÍTICA · POLÍCIA · ESPORTE …) ---- */
.nav-editorias a {
  font-family: var(--font-sans);
  font-weight: 900;          /* Medium-spec but visually 800 because of CAPS */
  font-size: 14px;
  letter-spacing: 0.113em;
  line-height: 1.00;
  color: #0b0b0c;
  text-transform: uppercase;
}

/* ---- BREAKING ÚLTIMAS strip ---- */
#breaking-tag {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 12.5px;
  letter-spacing: 0.020em;
  line-height: 1.00;
  text-transform: uppercase;
}
#breaking-items {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.40;
  color: #3d3d3d;
}

/* ---- iPiauí portal component polish ---- */
.nav-editorias a {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: 14px;
  letter-spacing: 0.113em;
  line-height: 1;
  text-transform: uppercase;
}

.nav-editorias a:hover,
.nav-editorias a:focus-visible,
.nav-editorias a:active {
  border-top-color: var(--editoria-color, var(--brand-red));
  color: var(--brand-red);
}

/* ---- iPiauí homepage news typography override ---- */
.font-title,
.font-body,
.geral-principal-title,
.geral-outros-title,
.geral-outros-chapeu,
.destaque-principal-title,
.destaque-principal-subtitle,
.destaque-outros-title,
.destaque-outros-subtitle,
.destaque-outros-chapeu {
  font-family: var(--font-sans) !important;
}

.geral-principal-title {
  font-weight: 900;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.geral-outros-title {
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.16;
}

.geral-outros-chapeu {
  font-weight: 800;
  letter-spacing: 0.085em;
  line-height: 1.15;
  text-transform: uppercase;
}