/* AssedioNet Perícias Blog — Brand tokens & fonts (tema WordPress)
   Família "Congenial AN" = alias local da fonte Congenial da marca,
   nomeada à parte para não colidir com o design system ao ser empacotada. */
/* Congenial — pesos usados no blog. Caminhos relativos a /assets/css/ */
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_ExtraLight.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_ExtraLight_Italic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_Light.otf") format("opentype"); font-weight:350; font-style:normal; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_Light_Italic.otf") format("opentype"); font-weight:350; font-style:italic; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_Medium.otf") format("opentype"); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Congenial AN"; src:url("../fonts/Congenial_Bold_Italic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; }

/* ---------- FONT FACES ---------- */
:root {
  /* ==========================================================================
     COLOR SYSTEM — 11 ton paleta oficial (MAV, p. 3)
     ========================================================================== */

  /* PURPLE FAMILY (dignidade, poder, justiça) */
  --an-purple-50:  #D78CBB; /* rosa-lavanda claro */
  --an-purple-100: #908DC4; /* lavanda acinzentado */
  --an-purple-200: #7D65A9; /* azul-roxo — pilar Comunidade */
  --an-purple-400: #9E4B97; /* roxo médio — pilar Cases/Relatos */
  --an-purple-600: #82377F; /* roxo profundo — destaque Sobre */
  --an-purple-900: #5F205F; /* roxo escuro — COR-ÂNCORA da marca */

  /* ORANGE FAMILY (ativismo, urgência, calor humano) */
  --an-orange-500: #DB6412; /* laranja vivo — CTA */
  --an-orange-700: #CC5515; /* laranja forte — pilar Direitos/Lei */

  /* YELLOW FAMILY (leveza, utilidade, esperança) */
  --an-yellow-200: #FFDC93; /* amarelo pálido */
  --an-yellow-500: #FCC41E; /* amarelo — pilar Dicas Práticas */
  --an-yellow-600: #F2B724; /* amarelo-ouro — pilar Histórias */

  /* NEUTRALS (não no MAV oficial, derivados para uso digital) */
  --an-ink:        #2B1A2E; /* quase-preto com toque roxo */
  --an-graphite:   #4A3A4E;
  --an-slate:      #6F6173;
  --an-mist:       #B8AFC0;
  --an-cream:      #F6F1E8; /* papel quente */
  --an-paper:      #FBF8F2;
  --an-white:      #FFFFFF;

  /* ==========================================================================
     SEMANTIC TOKENS
     ========================================================================== */

  /* FOREGROUNDS */
  --fg-1:         var(--an-ink);        /* primary text */
  --fg-2:         var(--an-graphite);   /* secondary text */
  --fg-3:         var(--an-slate);      /* tertiary / captions */
  --fg-muted:     var(--an-mist);
  --fg-brand:     var(--an-purple-900); /* âncora */
  --fg-accent:    var(--an-orange-700); /* CTA / urgência */
  --fg-on-dark:   var(--an-white);

  /* BACKGROUNDS */
  --bg-page:      var(--an-paper);
  --bg-surface:   var(--an-white);
  --bg-soft:      var(--an-cream);
  --bg-brand:     var(--an-purple-900);
  --bg-brand-soft: #EBE4F0;            /* tint derivado do roxo para cards */
  --bg-accent:    var(--an-orange-500);
  --bg-warm:      var(--an-yellow-200);

  /* CONTENT PILLARS (do Brand Strategy, p.13) */
  --pillar-definition: var(--an-purple-900); /* O que é assédio */
  --pillar-rights:     var(--an-orange-700); /* Direitos e lei */
  --pillar-cases:      var(--an-purple-400); /* Cases e relatos */
  --pillar-tips:       var(--an-yellow-500); /* Dicas práticas */
  --pillar-network:    var(--an-purple-200); /* Comunidade / Rede */

  /* BORDERS & LINES */
  --border-subtle:  rgba(95, 32, 95, 0.08);
  --border-default: rgba(95, 32, 95, 0.16);
  --border-strong:  var(--an-purple-900);

  /* ELEVATION — soft, warm (never cold shadows) */
  --shadow-xs: 0 1px 2px rgba(95, 32, 95, 0.08);
  --shadow-sm: 0 2px 6px rgba(95, 32, 95, 0.08), 0 1px 2px rgba(95, 32, 95, 0.06);
  --shadow-md: 0 8px 20px rgba(95, 32, 95, 0.10), 0 2px 6px rgba(95, 32, 95, 0.06);
  --shadow-lg: 0 20px 40px rgba(95, 32, 95, 0.14), 0 6px 12px rgba(95, 32, 95, 0.08);
  --shadow-inner: inset 0 1px 2px rgba(95, 32, 95, 0.10);

  /* RADII — generous, rounded like the speech bubbles */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;
  --radius-pill: 999px;

  /* SPACING — 4px base */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* ==========================================================================
     TYPOGRAPHY
     Congenial: thin & airy at display sizes; Bold for impact.
     The MAV names Bold + Extra Light as the signature pairing.
     ========================================================================== */

  --font-sans:    "Congenial AN", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Congenial AN", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* Weight ladder — the duality is the voice */
  --fw-hairline:  100;
  --fw-thin:      200;
  --fw-xlight:    300;  /* "Extra Light" — co-signature weight */
  --fw-light:     350;
  --fw-regular:   400;
  --fw-medium:    500;
  --fw-bold:      700;  /* signature weight */
  --fw-heavy:     800;
  --fw-black:     900;

  /* Size scale */
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  16px;
  --fs-md:    18px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   44px;
  --fs-4xl:   60px;
  --fs-5xl:   84px;
  --fs-6xl:   120px;

  /* Leading */
  --lh-tight: 1.05;
  --lh-snug:  1.2;
  --lh-base:  1.5;
  --lh-loose: 1.7;

  /* Tracking — Congenial is geometric; tighten at display, normal at body */
  --ls-tight:   -0.02em;
  --ls-snug:    -0.01em;
  --ls-normal:  0em;
  --ls-wide:    0.04em;
  --ls-eyebrow: 0.14em; /* ALL-CAPS label */
}

/* ==========================================================================
   SEMANTIC ELEMENT STYLES
   ========================================================================== */

.an-display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(48px, 7vw, var(--fs-6xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--fg-brand);
}

.an-hero, .h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-brand);
}

.h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-snug);
  color: var(--fg-brand);
}

.h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

.h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* THIN HERO — the signature "Extra Light huge" moment from the logo wordmark */
.an-hero-thin {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: clamp(44px, 6vw, var(--fs-5xl));
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-snug);
  color: var(--fg-brand);
}

/* EYEBROW — uppercase label, tracked wide */
.an-eyebrow, .eyebrow {
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--fg-accent);
}

/* BODY */
.p, .an-body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--fg-1);
  text-wrap: pretty;
}

.lead {
  font-family: var(--font-sans);
  font-weight: var(--fw-xlight);
  font-size: var(--fs-lg);
  line-height: var(--lh-base);
  color: var(--fg-2);
  text-wrap: pretty;
}

.caption {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
  color: var(--fg-3);
}

.quote {
  font-family: var(--font-display);
  font-weight: var(--fw-xlight);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--fg-brand);
  font-style: italic;
}

code, .code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--bg-brand-soft);
  color: var(--fg-brand);
  padding: 0.1em 0.4em;
  border-radius: var(--radius-xs);
}

/* Global opt-in */
html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-page); }