/* ============================================================
   BARROS — base.css
   Tokens, tipografia e reset. Fonte única de verdade visual.
   Documento controlado: DOC-WEB-CSS-001 · v1.0.0
   ============================================================ */

/* ─── Fontes self-hosted (IBM Plex · SIL OFL 1.1) ─────────── */
@font-face{font-family:"Plex Sans";src:url("../fonts/IBMPlexSans-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/IBMPlexSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/IBMPlexSans-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Sans";src:url("../fonts/IBMPlexSans-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url("../fonts/IBMPlexSerif-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Serif";src:url("../fonts/IBMPlexSerif-SemiBold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plex Mono";src:url("../fonts/IBMPlexMono-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ─── Tokens ──────────────────────────────────────────────── */
:root{
  /* Superfícies — papel frio, sem creme */
  --paper:      #F6F7F7;
  --surface:    #FFFFFF;
  --surface-2:  #EFF1F1;
  --ink:        #14181A;
  --ink-2:      #4E585C;
  --ink-3:      #667077;
  --line:       #E1E5E5;
  --line-soft:  #EDEFEF;

  /* As três casas — única saturação da página */
  --casa-barros: #8C5E3C;
  --casa-ds:     #3A5F82;
  --casa-is:     #3F7A6A;

  /* Marca — azul do logotipo Barros */
  --marca:   #0391FE;

  /* Estado */
  --focus:   #0391FE;
  --erro:    #9A3B33;
  --ok:      #3F7A6A;

  /* Tipografia */
  --f-display: "Plex Serif", Georgia, "Times New Roman", serif;
  --f-sans:    "Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:    "Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   0.8125rem;
  --t-sm:   0.9375rem;
  --t-base: 1.0625rem;
  --t-md:   1.1875rem;
  --t-lg:   1.5rem;
  --t-xl:   2rem;
  --t-2xl:  2.625rem;
  --t-3xl:  3.375rem;

  /* Métrica */
  --wrap: 1160px;
  --wrap-narrow: 720px;
  --gutter: clamp(20px, 5vw, 56px);
  --sp-1: 6px;  --sp-2: 12px; --sp-3: 20px;
  --sp-4: 32px; --sp-5: 52px; --sp-6: 84px; --sp-7: 128px;

  --radius: 3px;
  --radius-lg: 6px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ─── Reset ───────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,h4,p,figure,blockquote,dl,dd,ul,ol{margin:0}
ul[class],ol[class]{list-style:none;padding:0}
img,svg,video{max-width:100%;display:block}
button,input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-sans);
  font-size:var(--t-base);
  font-weight:400;
  line-height:1.65;
  letter-spacing:-0.003em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* ─── Tipografia ──────────────────────────────────────────── */
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:-0.02em;line-height:1.14;color:var(--ink)}
h1{font-size:clamp(2.35rem,5.4vw,var(--t-3xl))}
h2{font-size:clamp(1.75rem,3.8vw,var(--t-2xl))}
h3{font-size:var(--t-lg);line-height:1.28}
h4{font-family:var(--f-sans);font-size:var(--t-base);font-weight:600;letter-spacing:0}
p{max-width:68ch}
strong{font-weight:600}
em{font-style:normal;color:var(--ink);box-shadow:inset 0 -0.42em 0 var(--surface-2)}

a{color:var(--ink);text-decoration:none}
a:not([class]){
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.22em;
  text-decoration-color:var(--ink-3);
  transition:text-decoration-color .18s var(--ease);
}
a:not([class]):hover{text-decoration-color:var(--ink)}

/* Sobrelinha estrutural — categoriza, não decora */
.eyebrow{
  font-family:var(--f-mono);
  font-size:var(--t-xs);
  font-weight:500;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--ink-3);
  display:block;
  margin-bottom:var(--sp-2);
}
.lead{font-size:var(--t-md);color:var(--ink-2);line-height:1.72;font-weight:300}
.muted{color:var(--ink-2)}
.small{font-size:var(--t-sm)}
.mono{font-family:var(--f-mono);font-size:var(--t-xs);letter-spacing:.04em}

/* ─── Acessibilidade ──────────────────────────────────────── */
:focus-visible{outline:2px solid var(--marca);outline-offset:3px;border-radius:2px}
:focus:not(:focus-visible){outline:none}

.skip-link{
  position:absolute;left:var(--sp-3);top:-100px;z-index:9999;
  background:var(--ink);color:var(--surface);
  padding:10px 18px;border-radius:var(--radius);
  font-size:var(--t-sm);font-weight:500;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:var(--sp-3)}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}

/* ─── Impressão ───────────────────────────────────────────── */
@media print{
  body{background:#fff;font-size:11pt}
  .site-header,.site-footer .footer-grid,.cookie-bar,.lang-switch,.disco-wrap{display:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#555}
  .doc-control{border-top:1px solid #000;margin-top:16pt}
}