/* ==========================================================================
   Farol Design System, Colors & Type
   A newsroom-in-a-box: warm paper, ink black, single ochre accent, serifs.
   ========================================================================== */

/* Webfonts, Playfair Display (display serif), Source Serif 4 (body serif),
   IBM Plex Mono (labels/UI). Load from Google Fonts CDN.
   Note: IBM Plex Mono replaced DM Mono system-wide (April 2026), more
   instrumental/forensic character for the certainty labels and audit UI.
   The production site still uses DM Mono; update when ready. */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;0,900;1,400&family=Source+Serif+4:ital,opsz,wght@0,8..60,300;0,8..60,400;0,8..60,600;1,8..60,300;1,8..60,400&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap');

:root {
  /* ---------- Color primitives ---------- */
  /* Ink, foreground on paper */
  --ink:          #1a1814;   /* primary foreground; also the dark brand bg */
  --ink-mid:      #3d3830;   /* secondary text */
  --ink-soft:     #6b6357;   /* tertiary text, meta */
  --ink-faint:    #9a9088;   /* labels, captions, disabled */

  /* Paper, background family, warm off-white */
  --paper:        #f8f5f0;   /* primary surface (editions, cards) */
  --paper-alt:    #ede9e2;   /* secondary surface (audit panels, inset blocks) */
  --paper-warm:   #e5e0d8;   /* page-level surround around a "sheet" */

  /* Rules / dividers */
  --rule:         #d8d2ca;
  --rule-strong:  #b8b2aa;

  /* Dark surfaces, the masthead band & footer */
  --dark-bg:      #1a1814;   /* identical to --ink on purpose */
  --dark-bg-alt:  #111009;   /* deeper dark for edition-page surround */

  /* Brand accent, single ochre/amber */
  --accent:       #d49017;   /* primary brand accent (newsletter) */
  --accent-deep:  #c47d0e;   /* denser variant used on site */
  --accent-hot:   #d4960e;   /* hover state */
  --accent-soft:  rgba(212,144,23,.35);
  --accent-faint: rgba(212,144,23,.08);

  /* Semantic, certainty levels. The editorial backbone of Farol. */
  --verified:     #1a5c3a;   /* Confirmado, 3+ sources, forest green */
  --verified-bg:  #eaf4ef;
  --likely:       #0d7a7a;   /* Provável, 2 sources, warm teal, distinct from confirmed green */
  --likely-bg:    #e4f2f2;
  --warn:         #7a5c00;   /* Não verificado / Fonte única */
  --warn-bg:      #fdf8ec;
  --disputed:     #8b2020;   /* Contestado, sources diverge */
  --disputed-bg:  #fdf0f0;

  /* Semantic, category pills */
  --cat-geopolitics:        #c0392b;
  --cat-economy:            #2b5ea7;
  --cat-domestic-politics:  #7a5c00;
  --cat-justice:            #8b2020;
  --cat-sports:             #1a7a7a;
  --cat-science-health:     #5a4a8a;
  --cat-environment:        #2b7a4b;
  --cat-general:            var(--ink-faint);

  /* Bias spectrum, source classification */
  --bias-left:   #c0392b;
  --bias-cl:     #d4866b;
  --bias-c:      #9a8a6a;
  --bias-cr:     #6b9fd4;
  --bias-right:  #2b5ea7;
  --bias-inst:   #5a8a5a;   /* institutional (Banco Central, IBGE…) */
  --bias-state:  #8a6a8a;   /* state / estatal (Agência Brasil) */

  /* ---------- Typography primitives ---------- */
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-serif:   'Source Serif 4', Georgia, 'Times New Roman', serif;
  --font-mono:    'IBM Plex Mono', 'SF Mono', Consolas, 'Courier New', monospace;

  /* Type scale, designed around a 720,860px text column */
  --fs-masthead:  96px;  /* hero site masthead */
  --fs-display-1: 42px;  /* archive/page titles */
  --fs-display-2: 32px;  /* about / page titles */
  --fs-h1:        30px;  /* story headline in a newsletter */
  --fs-h2:        22px;  /* latest edition card title */
  --fs-h3:        18px;  /* archive list item */
  --fs-lead:      20px;  /* hero lede */
  --fs-body-lg:   17px;  /* summary body */
  --fs-body:      16px;  /* default body, about sections */
  --fs-small:     15px;  /* subtitle, bastidores */
  --fs-ui:        13px;  /* audit list items, cert-card desc */
  --fs-meta:      11px;  /* source chips, meta */
  --fs-label:     10px;  /* mono label, eyebrow */
  --fs-micro:     9px;   /* tiny all-caps axis labels */

  --lh-tight:   1.18;
  --lh-snug:    1.35;
  --lh-normal:  1.55;
  --lh-body:    1.65;
  --lh-summary: 1.82;   /* summary prose, airy */

  --ls-display:  -.4px;
  --ls-masthead: -1.5px;
  --ls-label:     2px;     /* all-caps mono labels */
  --ls-label-lg:  2.5px;   /* larger all-caps (eyebrows, taglines) */

  /* ---------- Layout primitives ---------- */
  --col-narrow:  700px;   /* about / archive / homepage */
  --col-wide:    860px;   /* edition / newsletter */
  --pad-sheet:   64px;    /* horizontal padding inside a "sheet" at desktop */
  --pad-sheet-sm:20px;    /* mobile */

  --radius-sm:   2px;
  --radius:      3px;
  --radius-md:   4px;     /* CTAs, audit toggle */

  /* Shadows, paper-on-paper, subtle */
  --shadow-sheet: 0 2px 8px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.10);
  --shadow-chip:  0 1px 3px rgba(0,0,0,.15);
}

/* ==========================================================================
   Dark tone. The exact inverse of the light tone, same structure, flipped.
   Activate with <html data-tone="dark"> or <body data-tone="dark">.
   Also falls back to prefers-color-scheme when tone isn't set explicitly.
   ========================================================================== */
[data-tone="dark"],
[data-tone="dark"] :root {
  --ink:          #f2ede3;
  --ink-mid:      #c5bfb5;
  --ink-soft:     #8a8278;
  --ink-faint:    #5a5448;

  --paper:        #14120e;   /* inverse of #f8f5f0 */
  --paper-alt:    #1f1c16;   /* inverse of paper-alt */
  --paper-warm:   #0a0906;   /* page surround */

  --rule:         #2a261f;
  --rule-strong:  #403a30;

  --dark-bg:      #14120e;   /* keep band DARK in dark mode, masthead uses paper-color letters */
  --dark-bg-alt:  #0a0906;

  --accent:       #e8a530;   /* slightly lifted for contrast on dark */
  --accent-deep:  #d4960e;
  --accent-hot:   #f2b440;
  --accent-soft:  rgba(232,165,48,.40);
  --accent-faint: rgba(232,165,48,.10);

  --verified:     #4fb378;
  --verified-bg:  #0f2418;
  --likely:       #4fc7c7;   /* teal in dark mode, distinct from verified green */
  --likely-bg:    #0b2525;
  --warn:         #d4a017;
  --warn-bg:      #2a2008;
  --disputed:     #e07070;
  --disputed-bg:  #2a1414;

  --cat-geopolitics:        #e27465;
  --cat-economy:            #6fa3e5;
  --cat-domestic-politics:  #d4a017;
  --cat-justice:            #d46868;
  --cat-sports:             #4fbfbf;
  --cat-science-health:     #9a88c8;
  --cat-environment:        #5fb87a;
  --cat-general:            var(--ink-faint);

  --bias-left:   #e27465;
  --bias-cl:     #e5a088;
  --bias-c:      #bfae88;
  --bias-cr:     #8abaff;
  --bias-right:  #6fa3e5;
  --bias-inst:   #7fb07f;
  --bias-state:  #b088b0;

  --shadow-sheet: 0 2px 8px rgba(0,0,0,.4), 0 16px 48px rgba(0,0,0,.6);
  --shadow-chip:  0 1px 3px rgba(0,0,0,.5);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tone="light"]):not([data-tone="dark"]) {
    /* same token set as [data-tone="dark"], kept in sync via the block above */
    color-scheme: dark;
  }
}

/* ==========================================================================
   Semantic type recipes. Apply with @extend-style copy-paste, or as classes.
   Each uses ONLY the tokens above.
   ========================================================================== */

.t-masthead {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-masthead);
  letter-spacing: var(--ls-masthead);
  line-height: .9;
}
.t-display-1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-1);
  letter-spacing: var(--ls-display);
  line-height: 1.15;
}
.t-display-2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-display-2);
  letter-spacing: var(--ls-display);
  line-height: 1.2;
}
.t-h1 {  /* story headline */
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  letter-spacing: var(--ls-display);
  line-height: var(--lh-tight);
  color: var(--ink);
}
.t-h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.3;
}
.t-h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
}
.t-lede {
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
  color: var(--ink-soft);
}
.t-summary {          /* verified summary body */
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body-lg);
  line-height: var(--lh-summary);
  letter-spacing: -.01em;
  color: var(--ink);
}
.t-body {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.8;
  color: var(--ink);
}
.t-subtitle {          /* story subtitle under headline */
  font-family: var(--font-serif);
  font-weight: 300;
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--ink-soft);
}
.t-mono-label {        /* eyebrows, section labels */
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-faint);
}
.t-mono-label--accent { color: var(--accent); }
.t-mono-meta {         /* small mono info, source chips */
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-meta);
  color: var(--ink-mid);
  letter-spacing: .3px;
}
.t-mono-ui {           /* CTA labels, buttons */
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}
.t-caption {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--ink-faint);
}