/* Reset, tipografia e as primitivas de chanfro. Tudo que o resto da skin assume já resolvido. */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 100%;
}

body {
  margin: 0;
  background: var(--chrome);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: var(--font-size-ui);
  line-height: var(--line-height-ui);
  /* why: o Win32 não antisserrilha subpixel em superfície que troca de cor sob o cursor, e o
     padrão do navegador faz o texto do chrome "engordar" ao passar o mouse. */
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.3;
}

h1 {
  font-size: 1.15rem;
}

h2 {
  font-size: 1rem;
}

h3 {
  font-size: 0.875rem;
}

p {
  margin: 0 0 var(--space-snug);
  /* why: 45-75 caracteres é o que a WCAG pede de comprimento de linha, e uma janela maximizada
     estoura isso sem teto. É a mesma dívida que o `ReadingWidth` do Design System pagou no head
     desktop, com a diferença de que aqui `max-width` resolve e lá exigiu trocar `Dock` por
     posicionamento à mão. */
  max-width: var(--reading-width);
}

a {
  color: var(--accent);
  text-decoration: underline;
}

code,
pre {
  font-family: var(--font-code);
  font-size: var(--font-size-small);
}

/* why: o foco visível é obrigação da WCAG e o anel padrão do navegador some contra o cinza de
   sistema. O contorno pontilhado é o que o Win32 já usava para a mesma coisa, então ele obedece
   a norma sem sair da época. */
:focus-visible {
  outline: 1px dotted var(--text);
  outline-offset: 1px;
}

::selection {
  background: var(--selection);
  color: var(--text);
}

/* A borda Win32 é duas cores em ângulo reto, e é ela que dá o relevo. `box-shadow` produziria um
   degradê suave, que é a estética errada por um par de décadas. */
/* why: `--surface` e não `--chrome`. Um painel elevado é o degrau mais alto da pilha, e pintá-lo
   com o cinza do cromo o deixava mais escuro que a página em que ele pousa — elevação ao
   contrário. O chanfro continua sendo quem marca o relevo; a superfície é quem diz a altura. */
.bevel-raised {
  border: 1px solid;
  border-color: var(--bevel-light) var(--bevel-shadow-deep) var(--bevel-shadow-deep)
    var(--bevel-light);
  background: var(--surface);
}

.bevel-sunken {
  border: 1px solid;
  border-color: var(--bevel-shadow-deep) var(--bevel-light) var(--bevel-light)
    var(--bevel-shadow-deep);
  background: var(--surface);
}

/* why: o sulco separa faixas de chrome — toolbar da grade, grupo de menu do seguinte. Duas linhas
   de 1px, e não uma de 2px: a de cima escurece e a de baixo clareia, que é o que faz a superfície
   parecer dobrada em vez de riscada. */
.bevel-groove {
  border-top: 1px solid var(--bevel-shadow);
  border-bottom: 1px solid var(--bevel-light);
}

.reading-column {
  max-width: var(--reading-width);
  margin-inline: auto;
}

.text-muted {
  color: var(--text-muted);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* why: a barra de rolagem padrão do Chromium é fina e flutuante, o oposto da barra Win32 que
   ocupa lugar e não some. Ela também é o único ponto da skin onde o navegador pinta chrome por
   conta própria, então deixá-la no padrão denunciaria a página por baixo da imitação. */
* {
  scrollbar-width: auto;
  scrollbar-color: var(--bevel-shadow) var(--surface-sunken);
}

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