/* BXYZ:..:eliot@bosmanxyz.xyz:..:.www.bosmanxyz.xyz */

@layer reset, base, tokens, layout, components, utilities, overrides;

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

  html,
  body {
    margin: 0;
    min-block-size: 100svh;
    overflow-x: clip;
  }

  button,
  a {
    font: inherit;
    color: inherit;
    text-decoration: none;
    text-decoration-thickness: var(--lank-underline-tjocklek);
    text-underline-offset: var(--lank-underline-offset);
  }

  button {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    text-align: inherit;
  }

  img,
  svg {
    display: block;
    max-inline-size: 100%;
  }

  figure,
  p,
  h1,
  h2,
  h3,
  h4,
  ul {
    margin: 0;
    padding: 0;
  }

  ul {
    list-style: none;
  }
}

@layer base {
  html {
    background: var(--yta-accent);
    scrollbar-width: none;
    overflow-x: clip;
  }

  ::-webkit-scrollbar {
    display: none;
  }

  body {
    font-family: var(--typsnitt-rubrik);
    font-weight: var(--vikt-rubrik);
    font-size: var(--typ-nav);
    line-height: var(--typ-nav-hojd);
    color: var(--text-pa-accent);
  }

  :focus-visible {
    outline: var(--fokus-linje) solid var(--fokus-farg);
    outline-offset: var(--fokus-linje);
  }

  .ram[data-yta="panel"] {
    --fokus-farg: var(--linje-farg-panel);
  }

  .ram[data-yta="accent"] {
    --fokus-farg: var(--linje-farg);
  }

  .ram[data-yta="svart"] {
    --fokus-farg: var(--yta-panel);
  }

  .lankrad a {
    line-height: var(--lank-rad-hojd);
    min-block-size: var(--lank-rad-hojd);
  }
}

@layer utilities {
  .visuellt-dold {
    position: absolute;
    inline-size: var(--dold-spalt);
    block-size: var(--dold-spalt);
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .hoppa {
    position: absolute;
    inset-inline-start: var(--gut-ytter);
    inset-block-start: var(--gut-ytter);
    z-index: calc(var(--lager-dev) + 2);
    background: var(--yta-panel);
    color: var(--text-pa-panel);
    padding-inline: var(--gut-ytter);
    transform: translateY(-200%);
  }

  .hoppa:focus {
    transform: none;
  }
}