@layer h-tokens, h-reset, h-base, h-components;

@font-face {
  font-family: "Mark Pro";
  src: url("./assets/fonts/markpromedium.otf") format("opentype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Mark Pro";
  src: url("./assets/fonts/markprobold.otf") format("opentype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Mark Pro";
  src: url("./assets/fonts/markproheavy.otf") format("opentype");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

@font-face {
  font-family: "Chainprinter";
  src: url("./assets/fonts/Chainprinter Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@layer h-tokens {
  :root {
    color-scheme: light;
    --h-white: #ffffff;
    --h-blue-800: #1b4a81;
    --h-blue-900: #163e6c;
    --h-lime-500: #e2e794;
    --h-font-body: "Mark Pro", "Avenir Next", Avenir, "Segoe UI", Arial, sans-serif;
    --h-font-label: "Chainprinter", "Courier New", monospace;
  }
}

@layer h-reset {
  *, *::before, *::after { box-sizing: border-box; }
  :where(body, h1, p) { margin: 0; }
  :where(img) {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
}

@layer h-base {
  html { scroll-padding-block-start: 32px; }
  body {
    background: var(--h-white);
    color: var(--h-blue-800);
    font-family: var(--h-font-body);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.5;
    overflow-wrap: break-word;
  }
  :where(a) {
    color: #146aaa;
    text-underline-offset: 0.2em;
  }
  :where(a:hover) { text-decoration-thickness: 2px; }
  :where(h1) {
    font-weight: 700;
    line-height: 1.166667;
  }
  :where(:focus-visible) {
    outline: 3px solid var(--h-blue-900);
    outline-offset: 3px;
    box-shadow: 0 0 0 3px var(--h-white);
  }
  ::selection {
    background: var(--h-lime-500);
    color: var(--h-blue-800);
  }
}

@layer h-components {
  .pular-conteudo {
    position: fixed;
    inset-block-start: 16px;
    inset-inline-start: 16px;
    z-index: 100;
    padding: 12px;
    transform: translateY(-200%);
    background: var(--h-white);
    color: var(--h-blue-800);
  }
  .pular-conteudo:focus { transform: translateY(0); }
}