@layer tokens, base, layout, componentes, utilitarios, impressao;

@layer base {
  /* Fontes locais: o IP da criança não vai ao Google. Licença OFL em OFL.txt, dentro de assets/fontes/<família>/. */
  @font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../assets/fontes/fredoka/fredoka-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: "Fredoka";
    font-style: normal;
    font-weight: 500 700;
    font-display: swap;
    src: url("../assets/fontes/fredoka/fredoka-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

  @font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../assets/fontes/nunito/nunito-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
  }

  @font-face {
    font-family: "Nunito";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("../assets/fontes/nunito/nunito-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }

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

  [hidden] {
    display: none !important;
  }

  html {
    background: var(--cor-fundo);
    color: var(--cor-texto);
    max-width: 100%;
    overflow-x: hidden;
    scroll-padding: var(--foco-respiro);
  }

  body {
    margin: 0 auto;
    max-width: var(--largura-pagina-max);
    padding: var(--pad);
    font-family: var(--fonte-familia-texto);
    font-size: var(--fonte-corpo);
    line-height: var(--altura-linha-texto);
    background-color: var(--cor-fundo);
    background-image: radial-gradient(var(--cor-pontilhado) 1.15px, transparent 1.16px);
    background-size: 18px 18px;
    overflow-x: hidden;
    scroll-padding: var(--foco-respiro);
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3,
  legend {
    font-family: var(--fonte-familia-titulo);
    font-weight: var(--fonte-peso-titulo);
    line-height: var(--altura-linha-titulo);
    margin: 0 0 var(--espaco-em-0-4);
  }

  button,
  input,
  select {
    font: inherit;
    color: inherit;
  }

  /* scroll-margin fora do :focus-visible: o Chrome lê o estilo antes de aplicar o foco,
     então o respiro precisa existir antes do Tab para o anel não ficar rente à borda */
  a,
  button,
  input,
  select,
  summary,
  textarea,
  [tabindex] {
    scroll-margin: var(--foco-respiro);
  }

  :focus {
    outline: none;
  }

  :focus-visible {
    outline: var(--foco-anel);
    outline-offset: var(--foco-afastamento);
    scroll-margin: var(--foco-respiro);
  }

  ::placeholder {
    color: var(--cor-texto-suave);
    opacity: 1;
  }

  [aria-pressed="true"],
  [aria-selected="true"],
  [aria-checked="true"] {
    background: var(--cor-selecionado);
    box-shadow: var(--sombra-aperta);
    transform: translate(var(--sombra-deslocamento), var(--sombra-deslocamento));
  }

  [aria-pressed="true"]:not(.cartao-fav):not(#favorito)::before,
  [aria-selected="true"]::before,
  [aria-checked="true"]::before {
    content: "✓";
  }

  button:active,
  .cartao:active,
  .cartao-molde:active,
  .cartao:has(.cartao-abrir:active),
  .cartao-molde:has(.cartao-abrir:active) {
    transform: translate(var(--sombra-deslocamento), var(--sombra-deslocamento));
  }

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

    button:active,
    .cartao:active,
    .cartao-molde:active,
    .cartao:has(.cartao-abrir:active),
    .cartao-molde:has(.cartao-abrir:active) {
      transform: none;
    }
  }

  @media (forced-colors: active) {
    button,
    .botao,
    .cartao,
    .cartao-molde,
    input,
    .campo-busca {
      border-color: CanvasText;
    }

    [aria-pressed="true"],
    [aria-selected="true"],
    [aria-checked="true"] {
      outline: var(--foco-largura) solid Highlight;
      outline-offset: var(--foco-afastamento);
      border-color: Highlight;
    }
  }

  /* !important em camada cedo vence o @media print da camada impressao */
  @media print {
    #folha[hidden] {
      display: block !important;
    }
  }
}