/* Magistra — sistema SINETE. Gerado de DESIGN.md.
   Nenhuma cor, fonte, medida, raio ou duracao existe fora deste arquivo. */

@font-face{
  font-family:"Fraunces"; src:url("fonte/fraunces.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Karla"; src:url("fonte/karla.woff2") format("woff2-variations");
  font-weight:400 700; font-style:normal; font-display:swap;
}

:root{
  /* cor — marca */
  --toga:#4A121B; --borgonha:#6E1F2A; --tinta:#17130F;
  --ouro-velho:#7A5C28; --folha:#EDE6E4;
  /* cor — neutros derivados da toga */
  --folha-2:#E2D8D6; --filete:#CDBDBA; --tinta-2:#5A4B47;

  /* tipografia */
  --f-display:"Fraunces",Georgia,serif;
  --f-corpo:"Karla",system-ui,sans-serif;
  --fv-display:"WONK" 1,"SOFT" 0,"opsz" 144;

  --t-d1:600 40px/1.05 var(--f-display);
  --t-d2:600 28px/1.15 var(--f-display);
  --t-d3:500 20px/1.25 var(--f-display);
  --t-corpo:400 16px/1.55 var(--f-corpo);
  --t-corpo-f:600 16px/1.55 var(--f-corpo);
  --t-apoio:400 14px/1.5 var(--f-corpo);
  --t-rotulo:600 12px/1.2 var(--f-corpo);

  /* espaco */
  --e1:4px; --e2:8px; --e3:12px; --e4:16px;
  --e5:24px; --e6:32px; --e7:48px; --e8:72px;

  /* raio */
  --r-selo:50%; --r-superficie:6px; --r-controle:8px; --r-marca:2px;

  /* profundidade — so o sinete */
  --relevo:inset 0 1px 0 rgba(255,255,255,.35),
           inset 0 -1px 0 rgba(23,19,15,.22);

  /* movimento */
  --curva-casa:cubic-bezier(.2,.8,.3,1);
  --t-prensa:180ms cubic-bezier(.2,.8,.3,1);
  --t-assento:120ms var(--curva-casa);
  --t-tela:240ms var(--curva-casa);
  --t-toque:120ms var(--curva-casa);
}

*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%}
body{background:var(--folha);color:var(--tinta);font:var(--t-corpo);overflow-x:hidden}

h1,h2,h3{font-family:var(--f-display);font-variation-settings:var(--fv-display)}

/* display so em tres tamanhos — DESIGN.md 3.3 */
.d1{font:var(--t-d1);font-variation-settings:var(--fv-display);letter-spacing:-.02em}
.d2{font:var(--t-d2);font-variation-settings:var(--fv-display);letter-spacing:-.015em}
.d3{font:var(--t-d3);font-variation-settings:var(--fv-display);letter-spacing:-.01em}

.rotulo{font:var(--t-rotulo);text-transform:uppercase;letter-spacing:.08em}
.apoio{font:var(--t-apoio);color:var(--tinta-2)}
.num{font-variant-numeric:tabular-nums}

:focus-visible{outline:2px solid var(--toga);outline-offset:2px}

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