/* ============================================================
   DIGITAL SOLUTIONS — base.css
   Tokens, tipografia e reset. Fonte única de verdade visual.

   Identidade DS: azul suave. Contraste alto onde o texto exige,
   saturação baixa em tudo o mais. Sem preto puro, sem alarme.

   Documento controlado: DOC-DS-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 de tom azulado, luz do norte */
  --paper:      #F4F7F9;
  --paper-rgb:  244,247,249;   /* para rgba() — manter em sincronia com --paper */
  --ink-rgb:    22,35,44;      /* para rgba() — manter em sincronia com --ink   */
  --surface:    #FFFFFF;
  --surface-2:  #E9EFF3;
  --ink:        #16232C;
  --ink-2:      #4A5D68;
  --ink-3:      #5F6E77;
  /* ink-3 é o tom mais claro usado em TEXTO (eyebrow, dt, hint).
     Passa em 4.5:1 sobre paper, surface e surface-2. Não clarear. */
  --line:       #DCE5EA;
  --line-soft:  #E9EFF2;

  /* As duas famílias do catálogo — única saturação da página */
  --casa-plataformas: #22536E;
  --casa-medida:      #4E8098;

  /* Marca — azul DS. Sereno de propósito: a página informa, não grita. */
  --marca:   #2F6283;

  /* Estado */
  --focus:   #2F6283;
  --erro:    #8A4038;
  --erro-rgb: 138,64,56;       /* para rgba() — manter em sincronia com --erro  */
  --ok:      #3D6F63;

  /* 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.75rem;
  --t-sm:   0.8125rem;
  --t-base: 0.9375rem;
  --t-md:   1.0625rem;
  --t-lg:   1.375rem;
  --t-xl:   1.875rem;
  --t-2xl:  2.4rem;
  --t-3xl:  3.05rem;

  /* 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.68;
  letter-spacing:-0.002em;
  -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.018em;line-height:1.16;color:var(--ink)}
h1{font-size:clamp(2rem,5vw,var(--t-3xl))}
h2{font-size:clamp(1.55rem,3.5vw,var(--t-2xl))}
h3{font-size:var(--t-lg);line-height:1.3}
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(--marca)}

/* 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.74;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(--focus);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}
}