@layer base {
  @font-face {
    font-family: "Slussen Expanded Thin";
    src: url("../../01_BXYZ26_TEFAT/TEFAT(R)_SHOPIFY_V5_20APRIL/assets/TEFATR_FONT_Slussen-Expanded-Thin.otf") format("opentype");
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
}

@layer tokens {
  :root {
    --forhandsvisning-yttre: yellowgreen;
    --forhandsvisning-kol: blue;
    --forhandsvisning-rad: orange;
    --forhandsvisning-cell: purple;
    --font-grid-ref: "Slussen Expanded Thin", sans-serif;
    --grid-ref-opacitet: 0.8;
  }
}

@layer components {
  .grid-ref {
    font-family: var(--font-grid-ref);
    font-weight: 100;
  }

  .grid-ref__cell::before {
    font-family: inherit;
    font-weight: 100;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-size: 9px;
    line-height: 1;
  }

  .grid-ref-styr {
    font-family: var(--font-grid-ref);
    font-weight: 100;
    font-size: 10px;
    line-height: 1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: var(--grid-ref-opacitet);
  }
}